Navigation Menu
NavigationA top-level menu bar with hover or keyboard activated popovers.
Built on the Base UI Navigation Menu primitive. Triggers open on hover with a short delay and support full keyboard navigation through the arrow keys.
npx shadcn@latest add navigation-menuDefault
A trigger with a portal, positioner, popup, and content.
Preview
Livetsx
1<NavigationMenu>2 <NavigationMenuList>3 <NavigationMenuItem value="getting-started">4 <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>5 <NavigationMenuPortal>6 <NavigationMenuPositioner sideOffset={8}>7 <NavigationMenuPopup className="w-64">8 <NavigationMenuContent>9 <NavigationMenuLink href="#">Installation</NavigationMenuLink>10 </NavigationMenuContent>11 </NavigationMenuPopup>12 </NavigationMenuPositioner>13 </NavigationMenuPortal>14 </NavigationMenuItem>15 </NavigationMenuList>16</NavigationMenu>
Viewport
Use NavigationMenuViewport to render popups from a shared viewport.
Preview
LivePopups are portaled to the body by default and anchored to the active trigger.
tsx
1<NavigationMenu>2 <NavigationMenuList>3 <NavigationMenuItem>4 <NavigationMenuTrigger>Why Shelf</NavigationMenuTrigger>5 <NavigationMenuPortal>6 <NavigationMenuPositioner sideOffset={8}>7 <NavigationMenuPopup className="w-72">8 <NavigationMenuContent>9 <NavigationMenuLink href="#">Performance</NavigationMenuLink>10 </NavigationMenuContent>11 </NavigationMenuPopup>12 </NavigationMenuPositioner>13 </NavigationMenuPortal>14 </NavigationMenuItem>15 </NavigationMenuList>16</NavigationMenu>
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| value | string | null | Controlled value of the open item. |
| onValueChange | (value) => void | Called when the open item changes. |
| orientation | "horizontal" | "vertical"= "horizontal" | Layout direction of the list. |
| delay | number= 50 | Delay in ms before opening on hover. |