Menu
BetaBatch C. A list of actions that opens from a button.
When to use
Use to group secondary actions behind one trigger, like "More actions".
When not to use
Don't use to pick a value in a form; use Select.
Anatomy
Last action: none. Columns shown: owner, status.
- Trigger (Button or IconButton)
- Popup
- Items with an optional icon and shortcut hint
- Group labels
- Dividers
- Checkbox items
- Destructive item, in red
Variants
| Part | Use |
|---|---|
| MenuItem | An action. tone="negative" for destructive actions. |
| MenuCheckboxItem | Turns something on or off, such as a table column. The menu stays open. |
| MenuGroup | A labeled group of items. |
| MenuSeparator | A divider between groups. |
States
| State | Look |
|---|---|
| Highlighted (hover or keyboard) | background.neutral.hover |
| Highlighted destructive item | background.negative.subtle |
| Checked | Check mark in content.brand |
| Disabled | content.disabled |
Open states are not shown as pictures: forcing a popup open hides the rest of the page from screen readers. Try them in the live example on the Code tab.