skills.rest
JKKN-Institutions
JKKN-InstitutionsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

header

Implements a responsive multi-level navigation header for Next.js applications with Tailwind CSS.

Updated Mar 25, 2026
Search Tags:#typescript#next.js#navigation#tailwind css#responsive#header#dropdown menu
One-click install
npx skills add https://github.com/JKKN-Institutions/Pharmacy_College_JKKN --skill header-jkkn-institutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: header
Source: https://github.com/JKKN-Institutions/Pharmacy_College_JKKN/tree/main/.claude/skills/header
Command: npx skills add https://github.com/JKKN-Institutions/Pharmacy_College_JKKN --skill header-jkkn-institutions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next, react, react-dom, tailwindcss, and includes references (resource) and assets (resource) components.

What problem does it solve? Building a responsive site header with deep navigation hierarchies is tedious: desktop dropdowns, nested submenus, mobile accordions, and sticky positioning each require careful state management and styling. This Skill provides a complete, working header component so you avoid rebuilding these patterns from scratch. ## Core Features & Use Cases - Desktop 2-Row Navigation: Logo, two rows of menu items, and a CTA button with hover dropdowns supporting up to 4 levels of nested submenus. - Mobile Full-Screen Overlay: Accordion-style expandable menus with body scroll locking and 44px touch targets. - Smart Menu Positioning: 2-column dropdown layouts for wide menus (COMMITTEE, FACILITIES) and right-aligned menus with left-opening submenus (OTHERS, RESEARCH). - Use Case: An educational institution website with dozens of pages organized under About, Academics, Accreditation, and Facilities can configure its entire navigation in one TypeScript data file and get working desktop and mobile menus immediately. ## Quick Start Copy the Header component, navigation data, and Tailwind config from the assets folder into your Next.js project, then ask the AI to integrate the Header into your root layout and customize the menu items in siteData.ts.

Frequently Asked Questions about header

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a multi-level dropdown navigation in Next.js?▼

Define your menu structure as nested NavItem objects in a siteData.ts file, where each item can contain a submenu array up to 4 levels deep. The Header component renders hover dropdowns on desktop and accordion menus on mobile automatically from this data.

How do I build a mobile accordion menu with React?▼

Track expanded menu labels in a Set stored in React state, then toggle membership on button clicks to expand or collapse submenus. The component also locks body scrolling via a useEffect that sets document.body.style.overflow while the overlay is open.

Does this header work with Next.js App Router and Tailwind CSS?▼

Yes, the Header component is built for Next.js 14+ with App Router and uses Tailwind CSS utility classes for all styling. It requires a tailwind.config.ts with custom primary and secondary colors plus fade-in and slide-down animations.

Why does my fixed header overlap page content?▼

A fixed header is removed from normal document flow, so page content renders underneath it. Add top padding to your main content container, such as pt-[80px] on mobile and lg:pt-[100px] on desktop, matching the header height.

How do I make dropdown submenus open left instead of right?▼

Add the menu's label to the right-aligned menus list in Header.tsx, which switches positioning classes from left-0 to right-0 and left-full to right-full. By default this applies to the OTHERS and RESEARCH menus to prevent overflow at screen edges.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
scamaiscamai

site-architecture

Plan website information architecture and generate ASCII Mermaid visual sitemaps.

Official
Advanced
DsantiagomjDsantiagomj

radix-ui

Implement accessible headless UI primitives for React projects.

Community
Intermediate