MenuItem
The MenuItem component represents individual items within a Menu. It supports links, buttons, active states, disabled states, and nested submenus.
Examples
Basic Menu Items
Menu items can be used as links or buttons:
Active State
Use the active prop to highlight the current menu item:
Disabled State
Use the disabled prop to disable interaction:
With Submenu
Menu items can have nested submenus using the value prop with a children array:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | '#' | Link href. If provided, renders as an anchor tag; otherwise renders as a button. |
active | boolean | false | Whether the menu item is currently active |
disabled | boolean | false | Whether the menu item is disabled |
initialOpen | boolean | false | Whether the submenu is initially open |
ariaLabel | string | '' | ARIA label for accessibility |
id | string | crypto.randomUUID() | HTML id for accessibility |
class | string | '' | Additional CSS classes |
value | any | {} | Value associated with this menu item. Can include a children array for submenus. |
Slots
MenuItem accepts a default slot for custom content:
- default - The content of the menu item
Features
- Flexible rendering as link or button based on href prop
- Active and disabled states
- Nested submenu support
- Full keyboard navigation support
- ARIA labels for accessibility
- Responsive design
- Dark mode support
Accessibility
- Semantic HTML with proper role attributes
- ARIA labels for screen readers
- Keyboard navigation support
- Proper disabled state handling
- Focus management for submenus