Dropdown Menu

A menu of actions opened from a button. Full keyboard support, typeahead, submenus, checkbox and radio items.

OverlaysRadix Dropdown Menu

Playground

Tweak the props, the preview and the code follow.

Props

side

align

icons

shortcuts

label

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>maya@acme.com</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      <User /> Profile
      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <CreditCard /> Billing
      <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Settings /> Settings
      <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive"><LogOut /> Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation

npx @plumsydev/plum-ui add dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My account</DropdownMenuLabel>
    <DropdownMenuItem>
      Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkbox & radio items

Prevent the default onSelect to keep the menu open while toggling.

Sort

A radio group that reorders a list. Rows glide to their new position.

Projects

acme-web2m ago
status-page12m ago
billing-api30m ago
docs5h ago

API Reference

DropdownMenuContent

Prop	Type	Default
`side` Preferred side.	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`align` Alignment against the trigger.	`"start" \| "center" \| "end"`	`"center"`
`sideOffset` Distance from the trigger in px.	`number`	`6`

DropdownMenuItem

Prop	Type	Default
`variant` Use destructive for dangerous actions.	`"default" \| "destructive"`	`"default"`
`inset` Indents the item to line up with checkbox items.	`boolean`	`false`
`onSelect` Fires when chosen. Call `event.preventDefault()` to keep the menu open.	`(event: Event) => void`	`—`
`disabled` Skipped by keyboard navigation.	`boolean`	`false`

DropdownMenuCheckboxItem

Prop	Type	Default
`checked` Controlled checked state.	`boolean \| 'indeterminate'`	`—`
`onCheckedChange` Called when toggled.	`(checked: boolean) => void`	`—`

Notes

Icons inside items are sized and muted automatically. Add a text-* class to an icon to opt out of the muted color.

PreviousDrawer NextEmpty