Dropdown Menu

Items, checkbox and radio items, submenus, and shortcut hints in the same mono as the keys.

pulls in@base-ui/reactlucide-react@afterglow/theme

Installation

npx shadcn@latest add @afterglow/dropdown-menu

Composition

Component structure.

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

API Reference

A label has to sit inside a DropdownMenuGroup. Base UI throws when it does not, and the throw arrives the first time the menu opens, long after it compiled.

DropdownMenuContent

The portal, the positioner and the popup in one part, with the three positioning props lifted onto it.

Prop	Type	Default
align	"start" \| "center" \| "end"	"start"
side	"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"	"bottom"
sideOffset	number	4

DropdownMenuLabel

Prop	Type	Default
inset	boolean	false

DropdownMenuItem

inset indents past the column the checkmarks live in, so a plain item lines up with the checkable ones above it.

Prop	Type	Default
inset	boolean	false
variant	"default" \| "destructive"	"default"

DropdownMenuSubTrigger

Prop	Type	Default
inset	boolean	false

Everything else is Base UI menu's API, documented there.