Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Examples

Default

Preview

Checkboxes

Preview

Radio Group

Preview

API

DropdownMenu

Property	Type	Possible values	Default	Description
…props	All Radix DropdownMenu.Root props	-	-	All native properties of the Radix UI DropdownMenu Root component.

DropdownMenuTrigger

Property	Type	Possible values	Default	Description
asChild	boolean	true, false	false	When true, the component doesn’t render its own DOM element but uses the child as trigger.
…props	All Radix DropdownMenu.Trigger props	-	-	All native properties of the Radix UI DropdownMenu Trigger component.

DropdownMenuContent

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the dropdown content.
sideOffset	number	-	4	Distance in pixels from the trigger to position the content.
align	”start” \| “center” \| “end"	"start”, “center”, “end"	"center”	Alignment of the content relative to the trigger.
…props	All Radix DropdownMenu.Content props	-	-	All native properties of the Radix UI DropdownMenu Content component.

DropdownMenuItem

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the menu item.
inset	boolean	true, false	false	When true, adds extra indentation to the item.
variant	”default” \| “destructive"	"default”, “destructive"	"default”	Visual variant of the item. Use “destructive” for removal/deletion actions.
disabled	boolean	true, false	false	When true, disables the menu item.
…props	All Radix DropdownMenu.Item props	-	-	All native properties of the Radix UI DropdownMenu Item component.

DropdownMenuCheckboxItem

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the checkbox item.
checked	boolean \| “indeterminate”	true, false, “indeterminate”	false	Checkbox state of the item.
onCheckedChange	(checked: boolean \| “indeterminate”) => void	-	-	Callback called when the checkbox state changes.
children	React.ReactNode	-	-	Content of the checkbox item.
…props	All Radix DropdownMenu.CheckboxItem props	-	-	All native properties of the Radix UI DropdownMenu CheckboxItem component.

DropdownMenuRadioGroup

Property	Type	Possible values	Default	Description
value	string	-	-	Value of the selected radio item.
onValueChange	(value: string) => void	-	-	Callback called when the radio group selection changes.
…props	All Radix DropdownMenu.RadioGroup props	-	-	All native properties of the Radix UI DropdownMenu RadioGroup component.

DropdownMenuRadioItem

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the radio item.
value	string	-	-	Unique value of the radio item.
children	React.ReactNode	-	-	Content of the radio item.
…props	All Radix DropdownMenu.RadioItem props	-	-	All native properties of the Radix UI DropdownMenu RadioItem component.

DropdownMenuLabel

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the label.
inset	boolean	true, false	false	When true, adds extra indentation to the label.
…props	All Radix DropdownMenu.Label props	-	-	All native properties of the Radix UI DropdownMenu Label component.

DropdownMenuSeparator

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the separator.
…props	All Radix DropdownMenu.Separator props	-	-	All native properties of the Radix UI DropdownMenu Separator component.

DropdownMenuShortcut

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the shortcut.
children	React.ReactNode	-	-	Keyboard shortcut text (e.g., “⌘K”).
…props	All HTML span props	-	-	All native properties of the HTML span element.

DropdownMenuSubTrigger

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the submenu trigger.
inset	boolean	true, false	false	When true, adds extra indentation to the trigger.
children	React.ReactNode	-	-	Content of the submenu trigger.
…props	All Radix DropdownMenu.SubTrigger props	-	-	All native properties of the Radix UI DropdownMenu SubTrigger component.

DropdownMenuSubContent

Property	Type	Possible values	Default	Description
className	string	-	-	Additional CSS classes to apply to the submenu content.
…props	All Radix DropdownMenu.SubContent props	-	-	All native properties of the Radix UI DropdownMenu SubContent component.

Last updated on January 8, 2026