Components

Dropdown Menu

Displays a menu of actions or options triggered by a button, with full support for icons, shortcuts, checkbox and radio items, and nested submenus.

Basic usage

Wrap a trigger and a content panel of items. Use asChild to render the trigger as a Button.

Use DropdownMenuCheckboxItem for independent toggles and DropdownMenuRadioGroup for mutually exclusive choices.

Nest a DropdownMenuSub to group related actions behind a hover-expandable trigger.

DropdownMenu (root) accepts the open-state props below. All parts forward their underlying Radix and native element props.

Prop	Type	Default	Description
`open`	boolean	`—`	Controlled open state of the menu. Omit for uncontrolled behavior.
`defaultOpen`	boolean	`false`	Open state when initially rendered, for uncontrolled usage.
`onOpenChange`	(open: boolean) => void	`—`	Event handler called when the open state changes.
`modal`	boolean	`true`	Whether the menu traps focus and blocks outside interaction while open.
`dir`	'ltr' \| 'rtl'	`'ltr'`	Reading direction, affecting submenu placement and arrow keys.

DropdownMenuContent

Prop	Type	Default	Description
`align`	'start' \| 'center' \| 'end'	`'center'`	Alignment of the content against the trigger.
`side`	'top' \| 'right' \| 'bottom' \| 'left'	`'bottom'`	Preferred side of the trigger to render against.
`sideOffset`	number	`4`	Distance in pixels between the content and the trigger.
`className`	string	`—`	Additional Tailwind classes — commonly a width such as w-56.

DropdownMenuItem

Prop	Type	Default	Description
`variant`	'default' \| 'destructive'	`'default'`	Styles the item — destructive renders in the red token for dangerous actions.
`inset`	boolean	`false`	Adds left padding to align with items that have a leading icon or indicator.
`disabled`	boolean	`false`	Disables the item, removing pointer events and dimming it.
`onSelect`	(event: Event) => void	`—`	Called when the item is selected via mouse or keyboard.

Built on Radix UI, the menu follows the WAI-ARIA menu button pattern with the correct role and aria-* wiring applied automatically.
Fully keyboard operable — open with Enter, Space, or arrow keys, move with arrows, activate with Enter, and dismiss with Esc.
Typeahead lets users jump to an item by typing its label; submenus open with → and close with ←.
Focus is trapped while the menu is open and returns to the trigger on close; checkbox and radio items expose their checked state to assistive technology.