NavItem
A navigation link component optimized for menus and navigation lists. Supports active states, icons, and proper accessibility attributes for navigation landmarks.
Basic Navigation
With Icons
Real-World Example: App Navigation
Usage Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Visible navigation label |
| href | string | '#' | Link URL |
| icon | string|null | null | Leading icon name |
| active | boolean | false | Active/current page state |
| class | string | '' | Additional CSS classes |
Accessibility Features
ARIA Attributes:
- Active items include
aria-current="page" - Proper semantic
<a>elements for navigation - Should be wrapped in
<nav>with aria-label
Keyboard Navigation:
- Fully keyboard accessible with Tab navigation
- Clear focus indicators with ring offset
- Smooth transitions for all interactive states
Visual Indicators:
- Active state uses primary color with background
- Hover states provide clear feedback
- Icon colors adapt to active state