The NavigationMenu component provides a flexible navigation system with dropdown menus and submenus. Built on Radix UI primitives, it supports keyboard navigation, hover interactions, and responsive design.
Basic Usage
Navigation without Viewport
Properties
| Property | Type | Description |
|---|
viewport | boolean | Whether to render the viewport container. Default: true. |
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The navigation menu content. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The navigation menu items. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The menu item content (trigger and/or content). |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The trigger content (usually text). |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The dropdown content. |
| Property | Type | Description |
|---|
href | string | The URL to navigate to when clicked. |
active | boolean | Whether this link represents the current page. |
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The link content. |
Layout Patterns
Grid Layouts
- Two Column -
grid-cols-2 for balanced content
- Three Column -
grid-cols-3 for more options
- Auto Grid -
grid-cols-[repeat(auto-fit,minmax(200px,1fr))] for responsive
List Layouts
- Simple List - Basic vertical list of links
- Grouped Lists - Multiple sections with headers
- Icon Lists - Links with accompanying icons
Custom Layouts
- Mixed Content - Combine different content types
- Featured Items - Highlight important links
- Rich Content - Include images, descriptions, badges
Accessibility
The NavigationMenu component includes comprehensive accessibility features:
- Keyboard Navigation - Arrow keys, Enter, Escape, Tab support
- Focus Management - Proper focus handling and restoration
- Screen Reader Support - ARIA attributes and roles for assistive technologies
- Hover and Focus - Consistent behavior across interaction methods
- Active States - Clear indication of current page/section
Common Use Cases
The NavigationMenu component is perfect for:
- Website Headers - Main site navigation with dropdowns
- Application Menus - Complex app navigation structures
- Product Catalogs - Organized product category navigation
- Documentation Sites - Hierarchical content organization
- Dashboard Navigation - Admin panel and user interface menus
- E-commerce Sites - Product category and filter navigation
Best Practices
- Logical Grouping - Group related items together in dropdowns
- Clear Labels - Use descriptive, easy-to-understand menu labels
- Reasonable Depth - Avoid deeply nested menu structures
- Mobile Considerations - Ensure menus work well on touch devices
- Performance - Lazy load content in large menus when possible
- Visual Hierarchy - Use typography and spacing to create clear hierarchy
- Consistent Styling - Maintain consistent visual treatment across menus
- Active States - Clearly indicate the current page or section