Dropdown

A menu that opens from a trigger, showing a list of actions or navigation items. Built on Radix UI with full keyboard and accessibility support.

Anatomy

<Dropdown>
  <DropdownTrigger asChild>
    <Button>Open</Button>
  </DropdownTrigger>
  <DropdownContent>
    <DropdownItem onSelect={…}>Action</DropdownItem>
    <DropdownSeparator />
    <DropdownItem destructive onSelect={…}>Delete</DropdownItem>
  </DropdownContent>
</Dropdown>

Examples

With labels

Shortcuts and descriptions

Checkbox items

Radio items

With submenu

Props

DropdownContent

align= 'start'

'start' | 'center' | 'end'

Horizontal alignment of the menu relative to the trigger.

sideOffset= 4

number

Gap in pixels between trigger and menu.

Prop	Type	Default	Description
align	'start' \| 'center' \| 'end'	'start'	Horizontal alignment of the menu relative to the trigger.
sideOffset	number	4	Gap in pixels between trigger and menu.

DropdownItem

onSelect

(event: Event) => void

Called when the item is selected. Menu closes automatically.

disabled

boolean

Prevents interaction and dims the item.

destructive

boolean

Applies error colour — use for delete or irreversible actions.

icon

ReactNode

Icon rendered before the label.

shortcut

string

Keyboard shortcut hint shown right-aligned, e.g. "⌘K". Decorative — does not bind the key.

description

string

Secondary description line rendered below the label in a smaller muted style.

Prop	Type	Default	Description
onSelect	(event: Event) => void	—	Called when the item is selected. Menu closes automatically.
disabled	boolean	—	Prevents interaction and dims the item.
destructive	boolean	—	Applies error colour — use for delete or irreversible actions.
icon	ReactNode	—	Icon rendered before the label.
shortcut	string	—	Keyboard shortcut hint shown right-aligned, e.g. "⌘K". Decorative — does not bind the key.
description	string	—	Secondary description line rendered below the label in a smaller muted style.

DropdownCheckboxItem

checked

boolean

Whether the item is checked.

onCheckedChange

(checked: boolean) => void

Called when the checked state changes.

disabled

boolean

Prevents interaction and dims the item.

shortcut

string

Keyboard shortcut hint shown right-aligned.

Prop	Type	Default	Description
checked	boolean	—	Whether the item is checked.
onCheckedChange	(checked: boolean) => void	—	Called when the checked state changes.
disabled	boolean	—	Prevents interaction and dims the item.
shortcut	string	—	Keyboard shortcut hint shown right-aligned.

DropdownRadioItem

Wrap in DropdownRadioGroup with a value and onValueChange prop.

value*

string

The value this item represents within a DropdownRadioGroup.

disabled

boolean

Prevents interaction and dims the item.

shortcut

string

Keyboard shortcut hint shown right-aligned.

Prop	Type	Default	Description
value*	string	—	The value this item represents within a DropdownRadioGroup.
disabled	boolean	—	Prevents interaction and dims the item.
shortcut	string	—	Keyboard shortcut hint shown right-aligned.

PreviousDrawer NextPopover