import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: '0.5rem',
                padding: '0.75rem',
                minWidth: 320,
              }}
            >
              <NavigationMenuLink href="/web">Web</NavigationMenuLink>
              <NavigationMenuLink href="/mobile">Mobile</NavigationMenuLink>
              <NavigationMenuLink href="/desktop">Desktop</NavigationMenuLink>
              <NavigationMenuLink href="/cli">CLI</NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Variants

Rich content panels

Each NavigationMenuContent renders inside an elevated Card — fill it with any layout you like (grids, columns, banners).

Preview

Open

tsx

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div
              style={{
                display: 'grid',
                gridTemplateColumns: '220px 220px',
                gap: '0.75rem',
                padding: '1rem',
              }}
            >
              <div>
                <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>For teams</div>
                <NavigationMenuLink href="/teams/design">Design systems</NavigationMenuLink>
                <NavigationMenuLink href="/teams/engineering">Engineering</NavigationMenuLink>
              </div>
              <div>
                <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>For individuals</div>
                <NavigationMenuLink href="/individuals/freelance">Freelancers</NavigationMenuLink>
                <NavigationMenuLink href="/individuals/students">Students</NavigationMenuLink>
              </div>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Hide the trigger chevron

Pass hideChevron to NavigationMenuTrigger when the label is self-explanatory or you want to provide your own affordance.

Preview

Open

tsx

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger hideChevron>More</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div style={{ padding: '0.75rem', minWidth: 200 }}>
              <NavigationMenuLink href="/changelog">Changelog</NavigationMenuLink>
              <NavigationMenuLink href="/blog">Blog</NavigationMenuLink>
              <NavigationMenuLink href="/support">Support</NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Active link

Mark a NavigationMenuLink with active to set aria-current="page" plus a data-active flag.

Preview

Open

tsx

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="/">Home</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/components" active>
            Components
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

With indicator

Render NavigationMenuIndicator inside the list to show a small arrow pointing from the open trigger to its panel. Use this with NavigationMenuViewport for the shared-panel animation pattern.

Preview

Open

tsx

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div style={{ padding: '0.75rem', minWidth: 240 }}>
              <NavigationMenuLink href="/web">Web</NavigationMenuLink>
              <NavigationMenuLink href="/mobile">Mobile</NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div style={{ padding: '0.75rem', minWidth: 240 }}>
              <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
              <NavigationMenuLink href="/blog">Blog</NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuIndicator />
      </NavigationMenuList>
      <NavigationMenuViewport />
    </NavigationMenu>
  );
}

API

PropTypeDefaultDescription

value

string

—

defaultValue

string

—

onValueChange

((value: string) => void)

—

orientation

"horizontal"|"vertical"

—

Reserved for API parity.

dir

"ltr"|"rtl"

—

delayDuration

number

—

skipDelayDuration

number

—

Accessibility

The root renders inside a <nav> so screen readers identify it as primary navigation.
Triggers expose aria-expanded / aria-controls linking to their NavigationMenuContent panel (handled by Radix).
Left and right arrow keys move between top-level triggers; pressing Enter, Space, or ↓ opens the focused trigger’s panel.
Esc closes any open panel and returns focus to its trigger.
NavigationMenuLink with active sets aria-current="page" so the current route is announced.

Recipes

Use NavigationMenuViewport once at the end of the list when you want a single shared panel that animates between triggers.
Use NavigationMenuSub for nested sub-panels (rare, but exposed for parity with Radix).
Swap to a Drawer or Sidebar below the tablet breakpoint where horizontal space runs out.
Wrap NavigationMenuLink with asChild to compose with a router-aware <Link>.