Docs Components
DropdownMenuexperimental
A small menu of actions on a raised plate. Dangerous ones sit last, below a divider, so they're never hit by muscle memory.
Accessibility
Arrow Down / Arrow Up— Moves focus through enabled items, wrapping.Escape— Closes the menu.Enter / Space— Activates the focused item and closes.
API
| Prop | Type | Description |
|---|---|---|
label required | ReactNode | Trigger content. |
items required | (MenuItem | 'separator')[] | {id, label, danger?, disabled?, onSelect}. |
aria-label required | string | Names the trigger. |
Design specifications
- surface
color-bg-raised - border
color-border-rule - shadow
elevation-plate-sm - layer
layer-dropdown - item-font
type-body-sm - danger-item
color-status-danger-text
Guidelines
- shouldDestructive items sit last, below a separator.
- must-notA menu with one item is a button — unwrap it.