Dropdown
Menu of actions revealed from a trigger
Category: overlay · WCAG 2.2-AA · overlay, menu, actions
States
- closed
- open
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactElement | — | The element that opens the dropdown when activated. |
items | ({ label: string; value: string; icon?: ReactNode; disabled?: boolean } | { kind: 'separator' })[] | — | Menu entries. A selectable row is `{ label, value, icon?, disabled? }`; a rule between groups is `{ kind: 'separator' }`, which takes no label or value. The union is tagged on `kind`, so a separator cannot carry data that would be silently discarded. |
onSelect | (value: string) => void | — | Called with the selected value. |
placement | 'bottom-start' | 'bottom-end' | bottom-start | Which trigger edge the menu aligns to. `bottom-start` hangs it from the trigger's start edge, `bottom-end` from its end edge — use `bottom-end` for a trigger near the end of the viewport. |
open | boolean | — | Whether the component is open (controlled). |
onOpenChange | (open: boolean) => void | — | Called with the next open state when it changes. |
Design tokens
--cascivo-color-surface-overlay--cascivo-color-border--cascivo-color-bg-subtle--cascivo-radius-md--cascivo-z-dropdown
When to use
- Revealing a short menu of actions from a trigger button (row actions, "More" overflow, account menu)
- Grouping related commands behind one affordance with optional icons and separators
When not to use
- Selecting a persistent value for a form — use Select or Combobox
- A global searchable command palette — use CommandMenu; right-click context actions — use ContextMenu
How to build an accessible Dropdown in React →
Examples
Basic
<Dropdown trigger={<Button>Actions</Button>} items={[{ label: "Edit", value: "edit" }]} onSelect={handle} />Related components
- Select — Use for choosing and persisting a single form value
- CommandMenu — Use for a searchable global action palette
- Button — The trigger is typically a Button passed via the trigger prop