Dropdown Menu

Installation

npx shadcn@latest add @blank/dropdown-menu

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkbox items

Selection uses the item-selected surface, so checked rows read at a glance without relying on the check alone.

Radio items

indicatorPosition="start" moves the check in front of the text, where a classic menu puts it.

Compact

size="xs" on the content shrinks every item, label, shortcut and sub menu inside it. Use it for row actions and dense toolbars.

API Reference

DropdownMenuContent

Every Radix DropdownMenu.Content prop, plus:

DropdownMenuItem

Every Radix DropdownMenu.Item prop, plus:

DropdownMenuCheckboxItem, DropdownMenuRadioItem

DropdownMenuLabel, DropdownMenuSubTrigger