Dropdown Menu

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

"use client"

import { Button } from "@/components/ui/button"

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/dropdown-menu.json

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

Basic

A basic dropdown menu with labels and separators.

"use client"

import { Button } from "@/components/ui/button"

Submenu

Use DropdownMenuSub to nest secondary actions.

"use client"

import { Button } from "@/components/ui/button"

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

"use client"

import { Button } from "@/components/ui/button"

Icons

Combine icons with labels for quick scanning.

"use client"

import { CreditCardIcon, GearIcon, SignOutIcon, UserIcon } from "@phosphor-icons/react"

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

"use client"

import * as React from "react"

Checkboxes Icons

Add icons to checkbox items.

"use client"

import * as React from "react"

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

"use client"

import * as React from "react"

Radio Icons

Show radio options with icons.

"use client"

import * as React from "react"

Destructive

Use variant="destructive" for irreversible actions.

"use client"

import { PencilIcon, ShareIcon, TrashIcon } from "@phosphor-icons/react"

Avatar

An account switcher dropdown triggered by an avatar.

"use client"

import { BellIcon, CheckCircleIcon, CreditCardIcon, SignOutIcon } from "@phosphor-icons/react"

Complex

A richer example combining groups, icons, and submenus.

"use client"

import * as React from "react"

RTL

To enable RTL support, see the RTL configuration guide.

"use client"

import * as React from "react"

API Reference

See the Base UI documentation for the full API reference.

Drawer Empty

On This Page

Installation Usage Composition Basic Submenu Shortcuts Icons Checkboxes Checkboxes Icons Radio Group Radio Icons Destructive Avatar Complex RTL API Reference