Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Dropdown Menu
description: Displays a menu to the user, such as a set of actions or functions, triggered by a button.
---

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'dropdown-menu' }}
---
import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Icon } from "@/components/ui/icon"
---

<DropdownMenu>
  <DropdownMenuTrigger
    class={buttonVariants({ variant: "outline" })}
    aria-label="Open menu"
  >
    My Account
    <Icon name="chevron-down" class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>
        <Icon name="user" class="size-4" />
        Profile
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Icon name="credit-card" class="size-4" />
        Billing
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <Icon name="log-out" class="size-4" />
      Log out
      <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Installation

```bash
npx shadcn@latest add @fulldev/dropdown-menu
```

## Usage

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

```astro
<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`:

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

## Examples

### Basic

A basic dropdown menu with labels and separators.

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

<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>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>
```

### With Shortcuts

Add `DropdownMenuShortcut` to show keyboard hints.

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Actions
    <Icon name="chevron-down" 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.

```astro live
---
import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Icon } from "@/components/ui/icon"
---

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    File
    <Icon name="chevron-down" class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-48">
    <DropdownMenuItem>
      <Icon name="pencil" class="size-4" />
      Rename
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Icon name="copy" class="size-4" />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuItem variant="destructive">
      <Icon name="trash-2" class="size-4" />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

### With Checkboxes

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

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

<DropdownMenu defaultValues={["email", "push"]} closeOnSelect={false}>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Channels
    <Icon name="chevron-down" 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`.

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

<DropdownMenu defaultValue="pro">
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Plan
    <Icon name="chevron-down" 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.

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

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    Danger Zone
    <Icon name="chevron-down" class="size-4 opacity-60" />
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-56">
    <DropdownMenuItem>
      <Icon name="shield-alert" class="size-4" />
      Require re-authentication
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">
      <Icon name="trash-2" class="size-4" />
      Delete project
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

### With Avatar

An account dropdown triggered by a compact profile button.

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

<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
    <Icon name="chevron-down" 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>
        <Icon name="user" class="size-4" />
        Profile
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Icon name="credit-card" class="size-4" />
        Billing
      </DropdownMenuItem>
      <DropdownMenuItem>
        <Icon name="settings" 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.

```astro live
---
import { buttonVariants } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Icon } from "@/components/ui/icon"
---

<DropdownMenu>
  <DropdownMenuTrigger class={buttonVariants({ variant: "outline" })}>
    More
    <Icon name="chevron-down" 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](https://github.com/fulldotdev/ui/tree/main/src/components/ui/dropdown-menu) for more information on props.
See the [data-slot docs](https://github.com/bejamas/data-slot/blob/main/packages/dropdown-menu/README.md) for more information on interactivity.