Menu Item
Individual item within a menu component. Can include icons and display selected state.
Overview
- size
- tiny · small · medium
- Toggles
- isSelected, isActive
All options
Size and state
isActive is the keyboard highlight used by Select's listbox.
| size \ state | default | isSelected | isActive |
|---|---|---|---|
| medium | Settings | Settings | Settings |
| small | Settings | Settings | Settings |
| tiny | Settings | Settings | Settings |
Content
| content \ size | medium | small | tiny |
|---|---|---|---|
| label only | Settings | Settings | Settings |
| iconName | Settings | Settings | Settings |
| iconRight | Settings | Settings | Settings |
| tag | Settings 3 | Settings 3 | Settings 3 |
| tag with icon | Settings 5 | Settings 5 | Settings 5 |
| secondLabel | SettingsManage your profile | SettingsManage your profile | SettingsManage your profile |
| userImgUrl | Settings | Settings | Settings |
Tag color and variant
| tag.color \ tag.variant | contained | textOnly | dot |
|---|---|---|---|
| default | Messages 5 | Messages 5 | Messages 5 |
| success | Messages 5 | Messages 5 | Messages 5 |
| warning | Messages 5 | Messages 5 | Messages 5 |
| error | Messages 5 | Messages 5 | Messages 5 |
| info | Messages 5 | Messages 5 | Messages 5 |
Examples
With all props
Settings
Pro
Long text with truncation
This is a very long menu item text that should truncate with ellipsis when it exceeds the available space
Info
Accessibility
Role
A menu item has role="menuitem" by default. Select passes role="option", which also sets aria-selected from isSelected.
Keyboard
The item is focusable and Enter or Space activates it. With href, the item is wrapped in a link that takes focus instead.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| href | string | No | — |
| iconName | string | No | — |
| icon | React.ReactNode | No | — |
| userHandle | string | No | — |
| userImgUrl | string | No | — |
| label | string | Yes | — |
| secondLabel | string | No | — |
| isSelected | boolean | No | — |
| onClick | any | No | — |
| className | string | No | — |
| size | 'tiny' | 'small' | 'medium' | No | — |
| tag | { label: React.ReactNode; iconName?: string; color?: 'default' | 'success' | 'warning' | 'error' | 'info'; variant?: 'contained' | 'textOnly' | 'dot'; } | No | — |
| iconRight | string | No | — |
| rightAction | React.ReactNode | No | — |
| role | string | No | ARIA role; Select passes 'option'. Defaults to 'menuitem'. |
| id | string | No | — |
| isActive | boolean | No | Keyboard highlight used by Select's listbox |
| tabIndex | number | No | Select keeps focus on its trigger and passes -1 |