Dropdown Menu

A vertically stacked menu that appears when triggered by a button.

A vertically stacked menu that appears when triggered by a button.

When To Use

When you need to display a list of actions or options that would otherwise clutter the UI
For providing contextual actions for elements on the page
When you want to create nested hierarchical menus
As an alternative to traditional navigation patterns in space-constrained interfaces

Examples

A basic Dropdown Menu with simple items.

A Dropdown Menu with checkbox items for multiple selection.

A Dropdown Menu with radio items for single selection.

A Dropdown Menu with nested submenus.

Props

DropdownMenu

Prop	Type	Default
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuTrigger

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuContent

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuItem

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuCheckboxItem

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuRadioItem

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuLabel

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuSeparator

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuGroup

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuSub

Prop	Type	Default
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuSubTrigger

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuSubContent

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

DropdownMenuRadioGroup

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Accessibility

The Dropdown Menu component follows WAI-ARIA guidelines for menus:

Uses role="menu" for the dropdown content
Uses role="menuitem" for menu items
Uses role="menuitemcheckbox" for checkbox items
Uses role="menuitemradio" for radio items
Supports keyboard navigation (arrow keys, Enter, Space)
Automatically focuses the first item when opened
The Escape key closes the dropdown
Supports proper ARIA attributes for describing relationships between elements

Drawer

A panel that slides in from the edge of the screen.

Form

A set of components for building forms with validation.