<DropdownMenu>  <DropdownMenuTrigger render={<Button variant="outline">Options</Button>} />  <DropdownMenuContent align="start">    <DropdownMenuItem>Edit</DropdownMenuItem>    <DropdownMenuItem>Duplicate</DropdownMenuItem>    <DropdownMenuSeparator />    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>  </DropdownMenuContent></DropdownMenu>

Examples

Checkbox items

Toggle options with check indicators. Uncontrolled via defaultChecked.

Radio items

Single-select groups with a shared defaultValue.

Submenu

Nest a submenu off any item trigger.

API reference

DropdownMenu

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the menu opens or closes.	`(open: boolean) => void`	`-`
`onOpenChangeComplete` Called after open or close animations finish.	`(open: boolean) => void`	`-`
`modal` Lock page scroll and outside interaction while open.	`boolean`	`true`
`disabled` Ignore user interaction.	`boolean`	`false`

DropdownMenuContent

Prop	Type	Default
`side` Preferred placement side.	`"top" \| "right" \| "bottom" \| "left"`	`-`
`sideOffset` Gap between trigger and content.	`number`	`4`
`align` Alignment against the trigger edge.	`"start" \| "center" \| "end"`	`"start"`
`alignOffset` Offset along the alignment axis.	`number`	`-`
`render` Polymorphic render prop. Use to render a custom element instead of the default popup.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default content styles.	`string`	`-`

DropdownMenuTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button>Open menu</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

DropdownMenuItem

Prop	Type	Default
`variant` Destructive tints the item red.	`"default" \| "destructive"`	`"default"`
`inset` Offset content to align with labeled groups.	`boolean`	`-`
`onSelect` Back-compat alias for onClick. The menu still closes on select unless closeOnClick is false.	`(event) => void`	`-`
`disabled` Disable the item.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

DropdownMenuCheckboxItem

Prop	Type	Default
`checked` Controlled checked state. Use with onCheckedChange.	`boolean`	`-`
`defaultChecked` Initially checked when uncontrolled.	`boolean`	`-`
`onCheckedChange` Called when the checked state changes.	`(checked: boolean) => void`	`-`
`disabled` Disable the item.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

DropdownMenuRadioGroup

Prop	Type	Default
`value` Controlled selected value. Use with onValueChange.	`string`	`-`
`defaultValue` Initially selected value when uncontrolled.	`string`	`-`
`onValueChange` Called when the selection changes.	`(value: string) => void`	`-`
`disabled` Disable the whole group.	`boolean`	`false`

DropdownMenuRadioItem

Prop	Type	Default
`value`Required Value set on the group when selected.	`string`	`-`
`disabled` Disable the item.	`boolean`	`false`
`render` Polymorphic render prop.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default item styles.	`string`	`-`

DropdownMenuLabel

Prop	Type	Default
`inset` Offset content to align with inset items. The label renders its own group, so it works directly inside content.	`boolean`	`-`
`className` Additional classes merged with the default label styles.	`string`	`-`

DropdownMenuSeparator

Prop	Type	Default
`orientation` Divider direction.	`"horizontal" \| "vertical"`	`-`
`className` Additional classes merged with the default separator styles.	`string`	`-`

DropdownMenuShortcut

Prop	Type	Default
`className` Additional classes merged with the shortcut hint styles.	`string`	`-`

DropdownMenuSubTrigger

Prop	Type	Default
`inset` Offset content to align with inset items.	`boolean`	`-`
`disabled` Disable the submenu trigger.	`boolean`	`false`
`className` Additional classes merged with the default trigger styles.	`string`	`-`

Menu

Installation

Usage

Examples

API reference