<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/analytics">
          <span>Analytics</span>
          <span>Dashboards for every team.</span>
        </NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Composition

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

Examples

Links Only

Header Tabs

RTL

Motion

One popup is shared by every panel: it resizes and the panels slide in from the side the pointer came from. Under reduced motion it only fades.

Links

Use render on NavigationMenuLink for your router's link. The first span is the title and the second the muted line; active marks the current page.

API Reference

Built on the Navigation Menu primitive. Only the props this library adds or changes are listed; everything else passes through.

NavigationMenuTrigger

Adds the chevron. Also accepts every prop of NavigationMenu.Trigger.

NavigationMenuContent

A panel; size it with className. Also accepts every prop of NavigationMenu.Content.

NavigationMenuLink

Also accepts every prop of NavigationMenu.Link.

variant= "panel": "panel" | "trigger" | "tab"; trigger styles a top-level link like a trigger; tab is a full-height header section link with a 2px bar under the active one.

Prop	Type	Default	Description
variant	"panel" \| "trigger" \| "tab"	"panel"	`trigger` styles a top-level link like a trigger; `tab` is a full-height header section link with a 2px bar under the `active` one.

NavigationMenuList

Also accepts every prop of NavigationMenu.List.

NavigationMenuItem

Also accepts every prop of NavigationMenu.Item.

Navigation Menu

Installation

Usage