Basic
Simple Links
A navigation menu with plain links, no dropdowns.
Without Viewport
Set viewport=false to render content inline without the viewport wrapper.
Sub-components
| Component | Description |
|---|---|
| NavigationMenu | Root container with optional viewport |
| NavigationMenu.List | Horizontal list of navigation items |
| NavigationMenu.Item | Individual navigation item wrapper |
| NavigationMenu.Trigger | Button that opens dropdown content |
| NavigationMenu.Content | Dropdown panel with links |
| NavigationMenu.Link | Styled navigation link |
| NavigationMenu.Viewport | Animated container for content (auto-rendered) |
| NavigationMenu.Indicator | Visual indicator for active item |
Props
| Prop | Type | Description |
|---|---|---|
| viewport | boolean | Whether to render the viewport container for dropdown content (default: true) |
| className | string | Additional classes on the root element |
Usage
<NavigationMenu>
<NavigationMenu.List>
<NavigationMenu.Item>
<NavigationMenu.Trigger>Menu</NavigationMenu.Trigger>
<NavigationMenu.Content>
<div className="grid gap-3 p-4 w-[400px]">
<NavigationMenu.Link href="/docs">
<div className="font-head text-sm">Docs</div>
<p className="text-muted-foreground text-xs">
Read the documentation.
</p>
</NavigationMenu.Link>
</div>
</NavigationMenu.Content>
</NavigationMenu.Item>
</NavigationMenu.List>
</NavigationMenu>