Dropdown
A short list of actions or options that opens from a Button or a FilterButton. One component: the trigger and the menu come from props.
Master
Click the trigger to open the menu. Switch trigger, emphasis, intent, size and alignment.
Usage
Use Dropdown for row actions, a More menu, or filter options. trigger button uses the kit Button with a chevron (or an icon-only button); trigger filter uses the kit FilterButton with its count. Items are data: label, optional description, icon, danger, disabled, selected and checkbox, with { divider: true } between groups. For filters, use checkbox items and closeOnSelect false. The panel is a white card with a blue top line, placed under the trigger (above it when there is no room). Long lists scroll past 280px; searchable adds a search field on top. See contracts/dropdown.json for the full contract. The menu is fixed and placed under its trigger, and it keeps inside the frame it is in: the app frame when the screen sits in one, else the window. It gives up width rather than hanging outside, so a phone-width frame gets a narrower menu, not one over the edge. A portaled panel takes the theme of whatever opened it, so it is dark with a dark app frame even though it is drawn at the end of the page.
Do's
- Row actions behind a More button.
- A button that opens a short list of actions.
- Filter options behind a FilterButton.
Don'ts
- Do not invent DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, MenuDivider, ContextMenu or Popover cousins.
- Do not use for choosing a value in a form. Use Select.
- Do not put page navigation here. Use links.
- Do not use more than one divider in a row, or a divider first or last.
- Do not use a danger item for anything but destructive actions. Put it last, after a divider.
- Do not use raw hex.
- Do not use trigger field on its own. Use Select.
<Dropdown
label="Actions"
items={[
{ id: "edit", label: "Edit" },
{ id: "duplicate", label: "Duplicate" },
{ id: "archive", label: "Archive", disabled: true },
{ divider: true },
{ id: "delete", label: "Delete", icon: "delete", danger: true },
]}
trigger="button"
emphasis="subtle"
intent="neutral"
size="md"
alignment="left"
menuWidth="default"
/>