Navigation Menu
Horizontal navigation menu with dropdown content panels, click-outside close, and dot notation API.
Preview
Installation
npx drivn add navigation-menuUsage
1 import { NavigationMenu } from "@/components/ui/navigation-menu" 2 import { LayoutGrid, MessageSquare } from "lucide-react" 3 4 export default function Page() { 5 return ( 6 <NavigationMenu> 7 <NavigationMenu.List> 8 <NavigationMenu.Item> 9 <NavigationMenu.Trigger> 10 Components 11 </NavigationMenu.Trigger> 12 <NavigationMenu.Content> 13 <NavigationMenu.Link href="/docs/components/card"> 14 <LayoutGrid /> 15 <span className="font-medium">Card</span> 16 </NavigationMenu.Link> 17 <NavigationMenu.Link href="/docs/components/dialog"> 18 <MessageSquare /> 19 <span className="font-medium">Dialog</span> 20 </NavigationMenu.Link> 21 </NavigationMenu.Content> 22 </NavigationMenu.Item> 23 <NavigationMenu.Item> 24 <NavigationMenu.Link href="/docs"> 25 Docs 26 </NavigationMenu.Link> 27 </NavigationMenu.Item> 28 </NavigationMenu.List> 29 </NavigationMenu> 30 ) 31 }
With Icons
With Descriptions
API Reference
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the nav element |
children | ReactNode | — | NavigationMenu.List and other content |
NavigationMenu.List
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the list |
children | ReactNode | — | NavigationMenu.Item elements |
NavigationMenu.Item
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the item |
children | ReactNode | — | Trigger + Content pair or a standalone Link |
NavigationMenu.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the trigger button |
children | ReactNode | — | Trigger label text |
NavigationMenu.Content
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes for the content panel |
children | ReactNode | — | Content panel children (links, custom layout) |
NavigationMenu.Link
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link destination URL |
className | string | — | Additional CSS classes for the link |
children | ReactNode | — | Link content (text, icons, or custom JSX layout) |