Dropdown menu
A list of actions behind a button, with groups and keyboard shortcuts.
When to use it
Use Dropdown Menu for actions that don’t deserve their own button: row actions, overflow menus, and account menus.
It runs actions. To choose a value that stays selected, use Select.
Dropdown menuThis page
Actions from a button.
Row actions and overflow menus.
Command
Search and run.
Many actions people know by name.
How it behaves
Use for actions; use Select for choosing a form value. Base UI handles arrow navigation, typeahead, focus, and Escape.
Use render={<Button />} to compose the trigger. Every icon-only trigger needs a label.
Use onClick for actions. Items can be disabled; keyboard highlighting is visible.
The full installed API includes DropdownMenuGroup/Label, CheckboxItem, RadioGroup/RadioItem, Sub/SubTrigger/SubContent, and Shortcut. DropdownMenuShortcut renders a plain Kbd at the end of the item, matching Command.
Build it
Add it with the shadcn CLI:
1pnpm dlx shadcn@latest add https://jzbui.com/r/dropdown-menu.jsonA complete example. Change the values to fit your product:
1234567891011121314import { Button } from "@/components/ui/button"import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
<DropdownMenu> <DropdownMenuTrigger render={<Button variant="outline" />}> Project actions </DropdownMenuTrigger> <DropdownMenuContent> <DropdownMenuItem onClick={() => console.log("Duplicate")}> Duplicate project </DropdownMenuItem> <DropdownMenuItem disabled>Archive project</DropdownMenuItem> </DropdownMenuContent></DropdownMenu>The full source is yours to edit once installed: