Navigation Menu
Top-level navigation with rich dropdown panels. Hover or focus a trigger to reveal grouped links. The dropdown uses an invisible hover-bridge between the trigger and the popover, so moving the cursor onto the panel keeps it open — no flicker across the gap.
Installation
npx ajaxui add navigation-menuMega menu
Three columns grouped by category — Learn, Community, Company. Good for marketing sites with deep information architectures.
Tabbed dropdown
Tabs inside the panel switch between subsets without closing the menu. Hover or focus a tab to swap the link list.
Compact list
Simple link list for utility menus. Add separators and accented call-to-actions inline.
Full app navbar
Real-world composition — logo, navigation, auth actions. Mix dropdown items with plain links by skipping <NavigationMenuTrigger>/<NavigationMenuContent> on items that don't need a panel.
Notes
Anatomy
<NavigationMenu> // owns the active-item state
<NavigationMenuList> // <ul> of items
<NavigationMenuItem value=…> // <li> with hover/focus
<NavigationMenuTrigger/> // button that opens the panel
<NavigationMenuContent> // dropdown — anything you want inside
<NavigationMenuLink/> // optional styled link
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Items without a panel (e.g. Pricing) can skip the Trigger/Content pair and render a plain anchor instead — see the full app navbar example.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string (on Item/Content) | — | Pairs a trigger with its content. Must match between Item and Content. |
| asChild | boolean (on Link) | false | Render the child as the anchor instead of injecting one. |