NavigationMenu
navigation-menuProvides triggers, links, and rich navigation panels through a shared animated viewport.
Usage
Basic usage
Trigger + Content combination hover to expand the shared floating layer; pure link items are directly placed in Link without Content.
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="resources">
<NavigationMenuTrigger>Resources</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="w-56">
<li><NavigationMenuLink href="#" className="block px-3 py-2">Document Center</NavigationMenuLink></li>
<li><NavigationMenuLink href="#" className="block px-3 py-2">Component library</NavigationMenuLink></li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="pricing">
<NavigationMenuLink href="https://example.com/#pricing">Price</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Mega panel
Content has free layout, and you can place a multi-column card grid to make a large navigation panel, and the panel size automatically deforms with the content.
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>Product</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid w-[28rem] grid-cols-2 gap-1">
{products.map((p) => (
<NavigationMenuLink key={p.title} href="#" className="block px-3 py-2">
<div className="font-medium text-foreground">{p.title}</div>
<div className="mt-0.5 text-xs text-muted">{p.desc}</div>
</NavigationMenuLink>
))}
</div>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Zero delay on
delay={0} opens on hover, without opening delay.
<NavigationMenu delay={0}>{/* ...List */}</NavigationMenu>When to use
Use NavigationMenu for primary site navigation that groups links under headings such as Products or Resources and opens rich mega panels with columns, icons, and descriptions. Use Navbar for a simple row of links, Menu for click-triggered commands such as Edit or Delete, or Menubar for a desktop-style File/Edit/View menu bar.
Import
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from "@hulianui/ui"Props
The root NavigationMenu forwards Base UI NavigationMenu.Root props. Each subcomponent forwards the corresponding Base UI part and adds className.
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | — | Controlled value of the currently open item. |
| defaultValue | any | — | Initially open item when uncontrolled. |
| delay | number | 100 | Delay before opening on hover, in milliseconds. Use 0 to open immediately. |
| closeDelay | number | — | Delay before closing after the pointer leaves, in milliseconds. |
| orientation | "horizontal" | "vertical" | "horizontal" | Menu-bar orientation. |
| className | string | — | Additional root class name. |
Subcomponents accept className and forward their matching Base UI props. NavigationMenuItem requires value; NavigationMenuLink forwards anchor attributes such as href.
Events
| Event | Type | Description |
|---|---|---|
| onValueChange | (value) => void | Called when the open item changes; forwarded to Base UI NavigationMenu.Root. |
Example
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid grid-cols-2 gap-1">{/* NavigationMenuLink entries */}</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="pricing">
<NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Usage guidelines
- [[base-ui-navigation-menu-content-must-stay-in-flow-for-popup-size-measure]]: do not add
position: absoluteto an activeNavigationMenuContent. Base UI measures its natural size to animate the shared Viewport's--popup-width/height. Removing it from flow reduces the measured size to zero and can collapse an otherwise valid panel to roughly 2×2 pixels. - For a plain link without a dropdown, place
NavigationMenuLinkdirectly insideNavigationMenuItem; do not wrap it in Trigger and Content.
Related
Playground
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>Product</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid grid-cols-2 gap-1">{/* NavigationMenuLink list */}</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem value="pricing">
<NavigationMenuLink href="/pricing">Price</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>