GitHub Stars

Dropdown Menu

Displays a menu to the user, such as a set of actions or functions, triggered by a button.

Installation

npx shadcn@latest add @fulldev/dropdown-menu

Usage

---
import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
---
<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Open
    <Icon name="chevron-down" class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuCheckboxItem value="email">
        Email notifications
      </DropdownMenuCheckboxItem>
      <DropdownMenuRadioItem value="pro">Pro plan</DropdownMenuRadioItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    └── DropdownMenuGroup
        ├── DropdownMenuCheckboxItem
        ├── DropdownMenuRadioItem
        └── DropdownMenuItem
            └── DropdownMenuShortcut

Examples

Basic

A basic dropdown menu with labels and separators.

With Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

With Icons

Combine icons with labels for quick scanning.

With Checkboxes

Use DropdownMenuCheckboxItem for toggles. Set closeOnSelect={false} when multiple selections should stay in the menu.

With Radio Group

Use DropdownMenuRadioItem for exclusive choices. The current selection is stored on the root DropdownMenu through defaultValue.

With Destructive Items

Use variant="destructive" for irreversible actions.

With Avatar

An account dropdown triggered by a compact profile button.

Sides

Use side, align, and sideOffset on DropdownMenuContent to control the popup placement without exposing the lower-level positioning wrappers.

API Reference

See the GitHub source code for more information on props. See the data-slot docs for more information on interactivity.