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; separator?: boolean }[] | — | The items to render. |
onSelect | (value: string) => void | — | Called with the selected value. |
placement | 'bottom-start' | 'bottom-end' | bottom-start | Placement relative to the trigger. |
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