Getting Started
Foundations
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, NavigationMenuIndicator, NavigationMenuViewport } from '@/components/ui/navigation-menu'#Examples
Default Navigation Menu
Navigation menu with dropdown content panels
Simple Navigation
Navigation menu with plain links only
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | The controlled value of the currently active menu item |
| defaultValue | string | — | The value of the menu item to activate by default |
| onValueChange | (value: string) => void | — | Callback fired when the active menu item changes |
| disabled | boolean | false | When true, prevents the user from interacting with the navigation menu |
| dir | 'ltr' | 'rtl' | 'ltr' | The reading direction of the navigation menu |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the navigation menu |