Dropdown Menu
Action menu with items, checkboxes, radio groups, submenus, and shortcuts.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/dropdown-menu.jsonUsage
import {
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
} from "@/components/ui/dropdown-menu";
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline">Actions</Button>} />
<DropdownMenuContent>
<DropdownMenuItem onClick={rename}>Rename</DropdownMenuItem>
<DropdownMenuItem destructive onClick={remove}>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Parts
| Part | Purpose |
|---|---|
DropdownMenuItem | Action item; destructive prop for dangerous actions |
DropdownMenuCheckboxItem | Toggleable item, stays open on click |
DropdownMenuRadioGroup / RadioItem | Single choice set |
DropdownMenuSub / SubTrigger / SubContent | Nested submenu |
DropdownMenuLabel, Separator, Shortcut, Group | Structure and hints |
Accessibility
- Full keyboard support from Base UI Menu: arrows navigate, typeahead jumps to items, Enter activates, Escape closes, submenus open with ArrowRight.
- Checkbox and radio items expose proper
aria-checkedstates.