Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Dropdown Menu for React

List of options on button interaction.

Ark UIBase UIReact AriaRadix UI

Installation

bunx --bun shadcn@latest add https://kit.dev/r/dropdown-menu.json

Anatomy

DropdownMenu
└── DropdownMenuTrigger
└── DropdownMenuContent
    └── DropdownMenuGroup
        └── DropdownMenuLabel
        └── DropdownMenuItem
        └── DropdownMenuSeparator
        └── DropdownMenuShortcut
        └── DropdownMenuSub
            └── DropdownMenuSubTrigger
            └── DropdownMenuSubContent

Usage

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
<DropdownMenu positioning={{ placement: "bottom-start" }}>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-40">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem value="profile">
        Profile
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem value="billing">
        Billing
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem value="settings">
        Settings
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem value="team">Team</DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem value="email">Email</DropdownMenuItem>
          <DropdownMenuItem value="message">Message</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem value="more">More...</DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
      <DropdownMenuItem value="new-team">
        New Team
        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem value="github">GitHub</DropdownMenuItem>
      <DropdownMenuItem value="support">Support</DropdownMenuItem>
      <DropdownMenuItem disabled value="api">
        API
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem value="logout">
        Log out
        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.
ArrowDown
Move down.
ArrowUp
Move up.
ArrowLeft
Move left.
ArrowRight
Move right.
Home
Go to the start.
End
Go to the end.

Demos

Basic

A basic dropdown menu with labels and separators.

Submenu

Use DropdownMenuSub to nest secondary actions.

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

Icons

Combine icons with labels for quick scanning.

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

Checkboxes Icons

Add icons to checkbox items.

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

Radio Icons

Show radio options with icons.

Destructive

Use variant="destructive" for irreversible actions.

Avatar

An account switcher dropdown triggered by an avatar.

Complex

A richer example combining groups, icons, and submenus.

Rtl

Right-to-left menu. See the RTL configuration guide for document direction.

API Reference