Dropdown Menu

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import LogOutIcon from "@lucide/astro/icons/log-out"
import UserIcon from "@lucide/astro/icons/user"

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

<DropdownMenu>
  <DropdownMenuTrigger
    class={buttonVariants({ variant: "outline" })}
    aria-label="Open menu"
  >
    My Account
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>
        <UserIcon class="size-4" />
        Profile
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <CreditCardIcon class="size-4" />
        Billing
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <LogOutIcon class="size-4" />
      Log out
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation

npx shadcn@latest add @fulldev/dropdown-menu

Usage

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"

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
    <ChevronDownIcon 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.

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Open
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

With Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Actions
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-52">
    <DropdownMenuItem>
      New tab
      <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      Share
      <DropdownMenuShortcut>⇧⌘S</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>
      Archive
      <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Icons

Combine icons with labels for quick scanning.

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
import CopyIcon from "@lucide/astro/icons/copy"
import PencilIcon from "@lucide/astro/icons/pencil"
import Trash2Icon from "@lucide/astro/icons/trash-2"

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    File
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-48">
    <DropdownMenuItem>
      <PencilIcon class="size-4" />
      Rename
    </DropdownMenuItem>
    <DropdownMenuItem>
      <CopyIcon class="size-4" />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuItem variant="destructive">
      <Trash2Icon class="size-4" />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Checkboxes

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

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"

import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
---

<DropdownMenu defaultValues={["email", "push"]} closeOnSelect={false}>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Channels
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Notifications</DropdownMenuLabel>
      <DropdownMenuCheckboxItem value="email"> Email </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem value="sms">SMS</DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem value="push">Push</DropdownMenuCheckboxItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

With Radio Group

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

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"

import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
---

<DropdownMenu defaultValue="pro">
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Plan
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-44">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Choose plan</DropdownMenuLabel>
      <DropdownMenuRadioItem value="starter">Starter</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="pro">Pro</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="team">Team</DropdownMenuRadioItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

With Destructive Items

Use variant="destructive" for irreversible actions.

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
import ShieldAlertIcon from "@lucide/astro/icons/shield-alert"
import Trash2Icon from "@lucide/astro/icons/trash-2"

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Danger Zone
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuItem>
      <ShieldAlertIcon class="size-4" />
      Require re-authentication
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <Trash2Icon class="size-4" />
      Delete project
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Avatar

An account dropdown triggered by a compact profile button.

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"
import CreditCardIcon from "@lucide/astro/icons/credit-card"
import SettingsIcon from "@lucide/astro/icons/settings"
import UserIcon from "@lucide/astro/icons/user"

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

<DropdownMenu>
  <DropdownMenuTrigger
    class="border-input bg-background inline-flex items-center gap-2 rounded-md border px-2 py-1.5 text-sm shadow-xs"
  >
    <Avatar class="size-7">
      <AvatarFallback>SV</AvatarFallback>
    </Avatar>
    Sil Veltman
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-64">
    <DropdownMenuLabel>
      <div class="grid gap-0.5">
        <span class="font-medium">Sil Veltman</span>
        <span class="text-muted-foreground text-xs font-normal">
          sil@example.com
        </span>
      </div>
    </DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        <UserIcon class="size-4" />
        Profile
      </DropdownMenuItem>
      <DropdownMenuItem>
        <CreditCardIcon class="size-4" />
        Billing
      </DropdownMenuItem>
      <DropdownMenuItem>
        <SettingsIcon class="size-4" />
        Settings
      </DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Sides

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

---
import ChevronDownIcon from "@lucide/astro/icons/chevron-down"

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    More
    <ChevronDownIcon class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-44" side="bottom" align="end" sideOffset={8}>
    <DropdownMenuItem>View details</DropdownMenuItem>
    <DropdownMenuItem>Copy link</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

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

Sidebar

Search