Navigation Menu
Website-style mega-menu with hover-triggered content panels. Used for marketing/site navigation headers.
Installation
pnpm
pnpm dlx @hex-core/cli add navigation-menuAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled active menu value |
onValueChange | function | — | Callback when active menu changes |
delayDuration | number | 200 | Delay before opening a menu on hover (ms) |
orientation | "horizontal" | "vertical" | horizontal | Layout direction |
AI Guidance
When to use
Use for marketing-site top nav with grouped links and mega-menus: Products, Resources, Pricing flyouts. Desktop-first but keyboard accessible.
When not to use
Don't use for app shell menus (use Menubar). Don't use for single dropdowns (use DropdownMenu). On mobile, pair with a separate hamburger/Drawer pattern — NavigationMenu collapses poorly on small screens.
Common mistakes
- Mixing regular <a> with NavigationMenuLink — must use NavigationMenuLink for keyboard/roving focus
- Forgetting the viewport — handled automatically when using the composed NavigationMenu root
- Too many top-level items overflow on mobile
Accessibility
Radix implements the WAI-ARIA menu-button pattern with hover-intent delays and focus trapping in content. Links inside NavigationMenuLink get roving tabindex.
Related components
Token budget: 800