Dropdown Menu
Contextual action menu.
Usage
Wrap your trigger in the child snippet to forward all required ARIA
and positioning props. The menu portals to <body>, is fully
keyboard-navigable, and closes on item select or Esc.
Groups & Labels
Use DropdownMenu.Group with DropdownMenu.Label to section related items. The disabled prop on an item prevents
selection while keeping it visible.
Props
Built on bits-ui — all underlying Bits UI DropdownMenu props are
forwarded transparently.
| Prop | Type | Default |
|---|---|---|
DropdownMenu.Root — open Controlled open state. | boolean | false |
DropdownMenu.Root — onOpenChange Callback fired when open state changes. | (open: boolean) => void | — |
DropdownMenu.Trigger — child Render prop that spreads trigger props onto a real element. | Snippet<[{ props: object }]> | — |
DropdownMenu.Content — class Extra classes merged onto the menu panel. | string | — |
DropdownMenu.Content — sideOffset Gap in px between trigger and menu. | number | 4 |
DropdownMenu.Content — align Horizontal alignment relative to the trigger. | 'start' | 'center' | 'end' | 'start' |
DropdownMenu.Item — disabled Prevents selection and applies muted styling. | boolean | false |
DropdownMenu.Item — onSelect Callback fired when the item is selected. | () => void | — |
DropdownMenu.Item — class Extra classes merged onto the item. | string | — |
DropdownMenu.Separator — class Extra classes merged onto the separator. | string | — |