opinion
Dropdown
A button that opens a list of actions.
Sort menuTypeahead, arrows, Esc
Tasks sorted by due date
In context
Card actionsAn overflow menu in a card header
Rota export
Done
Shifts out to payroll without the spreadsheet. Owner Leo Santos, done 10 Oct.
rota-export-march.csv · 90 KB
Props
| Prop | Type | Required | Default |
|---|---|---|---|
trigger | ReactElement<unknown, string | JSXElementConstructor<any>> | Yes | — |
items | DropdownItem[] | Yes | — |
Accessibility
A Radix dropdown menu: the trigger carries aria-haspopup="menu" and aria-expanded; the list is a role="menu" of role="menuitem"s. Arrow keys move, typing jumps to a match, Enter or Space picks, Esc closes and returns focus to the trigger.
data-rebar-* attributes
data-rebar-component="dropdown" on the content; data-rebar-part="item" per row, data-rebar-danger on destructive items.
Migrating to Ant Design
AntD's Dropdown takes a menu={{ items }} shape with similar per-item fields: a close, low-risk rename.