Getting Started
Foundations
Integrations
Components
Navigation Menu
A collection of navigation links with support for dropdown content panels, ideal for site-wide navigation.
#Installation
npx @dinachi/cli@latest add navigation-menu#Usage
tsx
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuViewport, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuIndicator } from '@/components/ui/navigation-menu'#Examples
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | any | null | The controlled value of the navigation menu item that should be currently open. |
| defaultValue | any | null | The uncontrolled value of the item that should be initially selected. |
| onValueChange | (value: any) => void | — | Callback fired when the active menu item changes. |
| delay | number | 50 | How long to wait (ms) before opening the navigation menu. |
| closeDelay | number | 50 | How long to wait (ms) before closing the navigation menu. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the navigation menu. |
| NavigationMenuArrow | component | — | Renders an arrow SVG pointing towards the trigger. Place inside Popup. |
| NavigationMenuBackdrop | component | — | Renders a backdrop overlay behind the popup. Place inside Portal. |