Dropdown Menu
A list of actions, from a button.
Default
A label, a group, shortcuts, and one item that means harm.
Actions rather than choices — that is what separates it from a Select. Arrow keys move, typing jumps to a matching entry, Escape closes, and the focus returns to the button that opened it. Items can carry ticks, dots, shortcuts and submenus.
Installation
npx philcn@latest add dropdown-menuThe file is written into your project. It is yours from then on — change it as you like.
Examples
Ticks and dots
Several boxes, kept open while they are ticked, and a group where only one dot can be on.
Props
| Prop | Type | What it does |
|---|---|---|
| DropdownMenu.open | boolean | Controlled: whether the menu is showing. |
| DropdownMenu.onOpenChange | ((open: boolean) => void) | Called when it opens or closes. |
| DropdownMenuContent.align | Align | How the panel lines up with the button. |
| DropdownMenuContent.side | Side | Which side of the button it prefers. |
| DropdownMenuContent.loop | boolean | Whether the last item wraps round to the first. |
| DropdownMenuItem.variant | "default" | "destructive" | Destructive paints the item red — for deleting, and nothing else. |
| DropdownMenuItem.closeOnSelect | boolean | Off keeps the menu open after a click, for something that will be clicked again. |
| DropdownMenuItem.inset | boolean | Indents an item that has no tick or icon, so its text lines up with the ones that do. |
| DropdownMenuCheckboxItem.checked | boolean | Whether this item is ticked. |
| DropdownMenuRadioItem.value * | string | What this dot stands for. Required. |
Types are read from the library itself, so this table cannot describe an option the code no longer has.