Dropdown Menu

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

Radix UI Base UI

Installation

Drawer Empty

On This Page

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

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add dropdown-menu

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

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

Use DropdownMenuSub to nest secondary actions.

Add DropdownMenuShortcut to show keyboard hints.

Use DropdownMenuCheckboxItem for toggles.

Use DropdownMenuRadioGroup for exclusive choices.

Use variant="destructive" for irreversible actions.

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

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

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

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

"use client"

import * as React from "react"

"use client"

import * as React from "react"

"use client"

import * as React from "react"

"use client"

import * as React from "react"

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

"use client"

import * as React from "react"

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