Dropdown menu

Installation

npx shadcn@latest add @quireui/dropdown-menu

Usage

<DropdownMenu>
  <DropdownMenuTrigger render={<Button />}>Actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuItem variant="danger">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Accessibility

The trigger is read as a menu button and the menu as a list of items. Checkbox items are read as checked or not, and a DropdownMenuLabel inside a group names that group.

Key	Action
Enter / Space / ↓	On the trigger: opens the menu on the first item.
↑	On the trigger: opens the menu on the last item.
↓ / ↑	Moves the highlight, wrapping at the ends.
Home / End	Jumps to the first or last item.
Letters	Jumps to the item that starts with what you type.
Enter / Space	Runs the highlighted item. Checkbox items toggle and keep the menu open.
Esc	Closes the menu and returns focus to the trigger.
Tab	Closes the menu and moves on.

DropdownMenuShortcut only shows a key hint. Inside an open menu, typing a letter jumps to the matching item, so binding the hint there would fight that. Bind the key where the action lives, for example with a Button's shortcut.

API reference

DropdownMenuTrigger

Also takes every prop of Base UI's Menu.Trigger.

DropdownMenuGroup

Also takes every prop of Base UI's Menu.Group.

DropdownMenu

Also takes every prop of Base UI's Menu.Root.

DropdownMenuContent

Also takes every prop of Base UI's Menu.Popup. Style it with [data-slot="dropdown-menu"].

DropdownMenuItem

Prop

Type

Also takes every prop of Base UI's Menu.Item.

DropdownMenuCheckboxItem

Also takes every prop of Base UI's Menu.CheckboxItem.

DropdownMenuLabel

Also takes every prop of Base UI's Menu.GroupLabel.

DropdownMenuSeparator

Also takes every prop of Base UI's Menu.Separator.

DropdownMenuShortcut

Also takes every <kbd> attribute.