NavigationMenu

NavigationMenu

Markdown

A horizontal site-navigation list with top-level links and shared morphing dropdown panels.

Use NavigationMenu for primary desktop navigation with a small number of stable categories. Use Menu for contextual actions related to a local trigger.

Navigation menu

Installation

$npx shadcn@latest add @patchui/navigation-menu

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/navigation-menu.tsx.

Usage

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs/components/button">
          Button
        </NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs" variant="trigger">
        Docs
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Each NavigationMenuItem contains either a top-level NavigationMenuLink or a NavigationMenuTrigger paired with NavigationMenuContent.

Composition

NavigationMenu
└── NavigationMenuList
    └── NavigationMenuItem
        ├── NavigationMenuLink
        └── NavigationMenuTrigger
            └── NavigationMenuContent
                └── NavigationMenuLink

NavigationMenu renders the shared portal, positioner, popup, and viewport internally. Content panels reuse that popup and animate its size and position between triggers.

API reference

PropTypeDefaultDescription
NavigationMenuLink.variant"item" | "trigger""item"Selects an in-panel link or a top-level trigger-aligned link treatment.
NavigationMenuLink.closeOnClickbooleantrueControls whether activating a link closes the open content panel.

The remaining parts expose their underlying Base UI Navigation Menu props. Use NavigationMenuLink render to integrate a framework router link while preserving menu behavior and styling.

Keyboard behavior

  • Tab moves into and out of the navigation menu.
  • Arrow keys move between top-level items and through links in an open content panel.
  • Enter or Space opens a trigger. Escape closes its panel and restores focus through Base UI.
  • Top-level destinations remain links; do not use a disclosure trigger when activation should navigate directly.

Responsive behavior

NavigationMenu does not provide a mobile transformation. Hide or replace it at the application breakpoint with a mobile navigation pattern such as Sheet. Keep the same destinations and hierarchy across both versions.