NavigationMenu
Complex hierarchical navigation system with multi-level dropdowns, viewport-aware positioning, and progressive disclosure patterns
NavigationMenu
Flexible navigation component with both Radix-style primitives and a compact items-based API for vertical and horizontal menus.
Radix-style primitives
Use NavigationMenu with NavigationMenuList, NavigationMenuLink and NavigationMenuContent to build fully custom navigation layouts.
Vertical
Horizontal
Radix-style multi-level
Nest NavigationMenuContent and NavigationMenuList to build multi-level menus with hover or click interactions.
Multi-level horizontal menu
Compact items API
Pass an items array for quick navigation trees with nested groups, icons and badges. The component renders the structure for you.
Vertical
Horizontal
Component API
Use NavigationMenuItem and NavigationMenuSection for fine-grained composition, including multi-level nested menus.
Nested component navigation
Variants
The variant prop controls visual style. Combine it with orientation to adapt to headers, sidebars or app shells.
default
primary
secondary
accent
ghost
glass
filled
outlined
minimal
Sizes
Use the size prop (sm, md, lg) to adjust item padding and typography.
Small
Medium
Large
Responsive layout
Use the responsive prop to switch orientation based on viewport, ideal for adaptive sidebars and headers.
Responsive navigation
Try resizing the viewport to see layout changes.
Usage Guidelines
When to Use
- Complex site navigation
- Mega menus
- Multi-level dropdowns
Accessibility
- ARIA navigation role
- Keyboard arrow key support
- Focus trap in dropdowns
Performance
- Lazy mega menu rendering
- Intersection observer for views
Common Mistakes
- Mega menus without clear organization
- Too many items per dropdown
Frequently Asked Questions
Related Components
View allApplication bar with scroll effects, elevation changes, and fixed/sticky positioning
Mobile bottom navigation bar with icon labels and active state indicators
Hierarchical navigation trail with separator customization, truncation support, and ARIA navigation landmarks
Enhanced anchor element with variant system, external link indicators, and programmatic navigation integration