Navigation Menu

Powered by

Base UIShadcn UILucide

Installation

When to use

The Navigation Menu component provides structured navigation with dropdowns and nested content. Use this decision tree to determine when it's appropriate:

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

Link Component

When using the Next.js <Link /> component, you can use navigationMenuTriggerStyle() to apply the correct styles to the trigger.

import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"

<NavigationMenuItem>
  <Link href="/docs" legacyBehavior passHref>
    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
      Documentation
    </NavigationMenuLink>
  </Link>
</NavigationMenuItem>

See also the Base UI documentation for handling client side routing.

Panel dropdowns

Multi-level nested

Inline submenus

Large scrollable panel

Custom link component

Rich content mega-menu

Featured card

Vertical orientation

Props

Keyboard interactions

Accessibility

• The menu container is role="menubar" (or navigation semantics when used as site nav). Use a real <nav> wrapper and give it an aria-label when there are multiple navigation regions on the page.
• Links inside panels must be real <a> elements — wrap a framework-router link with asChild on NavigationMenuLink so keyboard activation and focus handling still work.
• Base UI note: NavigationMenuIndicator is a no-op <div> — no auto-sized animated indicator is rendered. Use a custom element or additional CSS if you want this effect. See the migration callout.
• Always provide a keyboard-accessible hamburger / skip-link on small screens; the navigation menu primitive is desktop-first.

Credits

• We use Base UI for the navigation menu component.
• We take our inspiration from Shadcn UI for the navigation menu style.