Haedong
020

Dropdown Menu

Overlay

Nothing selected

Customize

Align
Trigger

Code

<DropdownMenu>
  <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Draft</DropdownMenuLabel>
    <DropdownMenuItem onSelect={rename}>Rename</DropdownMenuItem>
    <DropdownMenuItem onSelect={duplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuItem disabled>Publish</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem onSelect={remove}>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Install

npx shadcn@latest add https://components.haedong.dev/r/dropdown-menu.json

Props

Built on Popover: DropdownMenu takes its open / defaultOpen / onOpenChange, DropdownMenuTrigger its asChild, DropdownMenuContent its side / align. Items are not tabbable; Tab leaves and closes the menu.

PropTypeDescription
DropdownMenuItem.onSelect() => voidCalled on click, Enter or Space; the menu then closes and focus returns to the trigger.
DropdownMenuItem.disabledbooleanSkipped by arrow keys; dims to 40%.
DropdownMenuLabel<div>Muted group heading, not focusable.
DropdownMenuSeparator<div role="separator">Hairline between groups.