vert-ui
Browse docs
All components

Dropdown Menu

Action menu with items, checkboxes and radio groups. Arrow keys move, typing selects by letter, Escape closes.

Preview

Live preview

Usage

Examples

Actions with a destructive item

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onSelect={rename}>Rename</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive" onSelect={destroy}>
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Keep the menu open after choosing

<DropdownMenuItem
  onSelect={(event) => {
    event.preventDefault() // stops the menu closing
    duplicate()
  }}
>
  Duplicate
</DropdownMenuItem>

Reference

Props

PropTypeDefaultDescription
DropdownMenu modalbooleantrueKeeps pointer events outside the menu blocked while it is open.
DropdownMenuTrigger asChildboolean—Renders your own element as the trigger (Radix Slot), forwarding refs.
DropdownMenuContent side / align"top" | "right" | "bottom" | "left" / "start" | "center" | "end""bottom" / "end"Placement of the panel; flips when it would overflow the viewport.
DropdownMenuItem onSelect(event: Event) => void—Runs on selection; call event.preventDefault() to keep the menu open.
DropdownMenuCheckboxItem checkedboolean—Controlled check state; renders role="menuitemcheckbox".
DropdownMenuRadioItem valuestring—Value inside a DropdownMenuRadioGroup; renders role="menuitemradio".

Accessibility

Accessibility notes

  • Renders role="menu" with menuitem / menuitemcheckbox / menuitemradio children, so state is announced, not just colored.
  • Arrow keys move through items, Home/End jump, and printable characters select the next matching item.
  • Escape closes the menu and returns focus to the trigger; Tab closes without moving focus.
  • Use DropdownMenuSeparator between unrelated groups — it is exposed as role="separator".
  • Label each group with DropdownMenuLabel when the items would not make sense out of context.