Overlay
Dropdown
A menu tied to a trigger button. For a standalone menu with no trigger, use Menu.
ReactVueWeb Components
View in Storybook Playground
Examples
<Dropdown trigger="Options">
<Dropdown.Item onClick={…}>Edit</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item onClick={…}>Delete</Dropdown.Item>
</Dropdown>Props
| Name | Type | Default | Description |
|---|---|---|---|
trigger required | ReactNode | — | The trigger element label. |
children required | ReactNode | — | Menu items (use `Dropdown.Item` / `Dropdown.Divider`). |
alignEnd | boolean | false | Align the menu to the end (right) edge. @default false |
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Initial open state (uncontrolled). @default false |
onOpenChange | (open: boolean) => void | — | Called when open state changes. |
triggerProps | ButtonHTMLAttributes<HTMLButtonElement> | — | Props for the trigger button. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.