Dropdown Menu

A menu that appears on trigger, offering a list of actions, links, or selections.

Installation

pnpm dlx stera-ui@latest add dropdown-menu

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

Examples

With Icons

With Shortcuts

With Submenu

Destructive

Checkboxes

Radio Group

Title & Description

Use DropdownMenuItemContent, DropdownMenuItemTitle, and DropdownMenuItemDescription for richer item layouts.

API Reference

Built on Base UI's Menu primitive — see the full API reference there.

DropdownMenuItem

Prop	Type	Default
`variant`	`"default" \| "danger"`	`"default"`
`disabled`	`boolean`	`false`

DropdownMenuTrigger

Prop	Type	Description
`render`	`ReactElement`	Render prop for the trigger element

Subcomponents

Component	Description
`DropdownMenuLabel`	Non-interactive section heading
`DropdownMenuSeparator`	Horizontal divider
`DropdownMenuItemShortcut`	Right-aligned keyboard shortcut label
`DropdownMenuItemContent`	Column container for title + description
`DropdownMenuItemTitle`	Primary text inside `DropdownMenuItemContent`
`DropdownMenuItemDescription`	Secondary text inside `DropdownMenuItemContent`
`DropdownMenuCheckboxItem`	Checkbox-style toggle item
`DropdownMenuRadioGroup`	Radio-style selection group
`DropdownMenuRadioItem`	Individual radio item
`DropdownMenuSub`	Submenu container
`DropdownMenuSubTrigger`	Trigger that opens a submenu
`DropdownMenuSubContent`	Content panel for a submenu