Primary Nav

Sticky navigation header with glass morphism on scroll. Includes responsive mobile menu with full-screen overlay.

Key Features:

Dropdown menus with hover (desktop) and tap-to-expand (mobile) support
Active state indicator with underline (desktop) and primary color (mobile)
Sticky positioning with optional glass morphism effect on scroll
Responsive mobile menu with hamburger toggle
Full-screen mobile overlay navigation
Respects motion preferences (prefers-reduced-motion)
Keyboard accessible with focus indicators and aria-current
Theme-aware colors using CSS custom properties

Typography Customization:

--font-header-logo - Controls logo/brand font
--font-header-nav - Controls navigation link font
Define these CSS variables in your globals.css for ecosystem-wide control
Logo font applied via inline styles on the logo ReactNode
Nav font automatically applied by the Header component

Single Source of Truth: Typography is controlled by CSS variables, not props. Change --font-header-logo and --font-header-nav in globals.css to update all Header instances across your ecosystem.

Live Example

Brand

Code Example

<Header
  logo={
    <a href="/" className="font-semibold text-lg">
      Brand
    </a>
  }
  navLinks={[
    { label: 'Features', href: '/features' },
    {
      label: 'Products',
      active: true,
      children: [
        { label: 'Product A', href: '/products/a' },
        { label: 'Product B', href: '/products/b', active: true },
        { label: 'Product C', href: '/products/c' },
      ]
    },
    { label: 'About', href: '/about' },
  ]}
  actions={
    <>
      <a href="/signin">Sign In</a>
      <Button variant="default" size="sm">
        Get Started
      </Button>
    </>
  }
  glassOnScroll={true}
  sticky={true}
/>

Single-Stack Behavior

The Primary Nav uses sticky positioning to remain at the top of the viewport during scroll.

Positioning:

top-0 - Sticks to top of viewport
z-50 - Highest layer for primary navigation
h-16 lg:h-20 - Height: 64px mobile, 80px desktop