DropdownMenu
Action menu with items, labels, separators, and keyboard navigation. Compound component.
Example
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | No | Controlled open state |
defaultOpen | boolean | false | No | Initial state (uncontrolled) |
onOpenChange | (open: boolean) => void | — | No | Called when open state changes |
anchor | Anchor | 'bottom' | No | Position and alignment relative to trigger (e.g. bottom-right) |
asChild | boolean | false | No | On DropdownMenuTrigger — merges trigger props onto the child element. On DropdownMenuItem — merges menuitem props onto the child (e.g. <a> for navigation links) |
onSelect | () => void | — | No | On DropdownMenuItem — called when the item is selected |
disabled | boolean | false | No | On DropdownMenuItem — disables the item and skips it in keyboard navigation |
Accessibility
- role="menu" with role="menuitem" on items
- Arrow key navigation through items
- Enter/Space to select, Escape to close
- aria-expanded on trigger
Related Tokens
--dropdown-surface--dropdown-on-surface--dropdown-border--dropdown-item-margin-x