Dropdown Menu

A menu that appears on trigger click with items, groups, checkboxes, and nested sub-menus.

Usage

Use DropdownMenuCheckboxItem for toggleable options.

Element that opens the menu. Use with as-child to merge onto your own button.

The dropdown panel.

Prop	Type	Default	Description
`sideOffset`	`number`	`4`	Distance from the trigger in pixels.
`align`	`'start' \| 'center' \| 'end'`	-	Horizontal alignment relative to the trigger.

A menu item.

Prop	Type	Default	Description
`inset`	`boolean`	-	Add left padding to align with items that have icons.
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style variant.
`disabled`	`boolean`	-	Disable the item.
`textValue`	`string`	-	Text used for typeahead matching.

A checkbox menu item.

Prop	Type	Default	Description
`checked`	`boolean`	-	Checked state. Use with v-model:checked.

Groups radio items.

Prop	Type	Default	Description
`modelValue`	`string`	-	Selected value. Use with v-model.

A radio menu item.

Prop	Type	Default	Description
`value`*	`string`	-	The value for this radio option.

A label for a group of items.

Prop	Type	Default	Description
`inset`	`boolean`	-	Add left padding to align with items that have icons.

Visual divider between groups.

Displays a keyboard shortcut hint.

Groups items semantically.

Container for a sub-menu.

Item that opens a sub-menu.

Prop	Type	Default	Description
`inset`	`boolean`	-	Add left padding to align with other items.

The sub-menu dropdown panel.

Portal for rendering menu outside the DOM hierarchy.