Navigation Menu
NavigationA collection of links for navigating websites.
Import
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, ... } from "@/components/ui/navigation-menu";Usage
Interactive Navigation Menu
A navigation menu with dropdowns. On mobile, it transforms into an expandable accordion-style menu.
API Reference
value—stringThe controlled value of the active menu item
defaultValue—stringThe default value of the active menu item
onValueChange—(value: string) => voidEvent handler for value change
delayDuration200numberThe duration from when the mouse enters a trigger until the content opens
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The controlled value of the active menu item |
defaultValue | string | — | The default value of the active menu item |
onValueChange | (value: string) => void | — | Event handler for value change |
delayDuration | number | 200 | The duration from when the mouse enters a trigger until the content opens |