NavigationMenu

A top-level navigation bar with rich dropdown content panels — suited for site-wide navigation in headers. Triggers open panels that can contain links, descriptions, and any custom layout. Built on @base-ui/react/navigation-menu with animated panel transitions and full keyboard navigation.

Anatomy

<NavigationMenu> is the root — it also renders the internal NavigationMenuPositioner and portal. NavigationMenuList is the horizontal flex list. Each entry is a NavigationMenuItem containing either a NavigationMenuTrigger + optional NavigationMenuContent (for dropdown panels) or a standalone NavigationMenuLink (for direct page links). The align prop on the root controls panel alignment (default: "start").

NavigationMenuTrigger → NavigationMenuContent (panel)NavigationMenuLink (direct link)

Examples

Rich panel — with icons and descriptions

Simple — direct links only (no panels)

Design Guidelines

Do

  • Use for site-level navigation. NavigationMenu belongs in headers where it provides the primary wayfinding structure for an entire site or app.
  • Keep panel content scannable. Use icons, short labels, and brief descriptions. Users skim panels — walls of text will go unread.
  • Mark the active link. Pass data-active to the NavigationMenuLink matching the current page so users know where they are.

Don't

  • Don't use for in-page action menus. NavigationMenu is for navigation, not actions — use DropdownMenu or Menubar for action lists.
  • Don't put too many top-level items. More than 6–7 triggers makes the header crowded. Group related destinations inside a panel instead.
  • Don't hide critical links inside panels. Your most important destinations (Pricing, Sign Up) should be directly visible in the bar, not buried in a submenu.

Developer Reference

Accessibility & Behavior

  • Tab key moves focus between top-level triggers and direct links. Enter or Space opens a trigger's panel. Arrow keys navigate inside the open panel.
  • ESC closes the open panel and returns focus to the trigger.
  • NavigationMenuContent renders in a portal positioned below its trigger. The panel slides and fades with directional awareness (left ↔ right) as the user moves between triggers.
  • The align prop on NavigationMenu (default: "start") controls how panels align relative to their trigger — "center" or "end" are also valid.
  • NavigationMenuLink accepts a data-active attribute to apply the active style for the current route.

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    {/* Trigger with dropdown panel */}
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div className="grid w-[300px] gap-1 p-2">
          <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
          <NavigationMenuLink href="/automation">Automation</NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>

    {/* Direct link (no panel) */}
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
    </NavigationMenuItem>

    {/* Active link */}
    <NavigationMenuItem>
      <NavigationMenuLink href="/" data-active>Home</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

// Right-aligned panels
<NavigationMenu align="end">...</NavigationMenu>