Shadcn Dropdown Menu

A dropdown menu is a list of actions that opens from a button. Click a row and the menu closes. Use it for account menus, overflow toolbars, and settings — not for picking a form value.

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>

Put render={<Button />} on the trigger so the Button is the actual control. sideOffset on content defaults to 4.

Composition

Basic

Labels, separators, and a disabled item.

Submenu

DropdownMenuSub nests a second panel. Keep it one extra level.

Shortcuts

DropdownMenuShortcut paints ⌘S. It does not bind the key.

Icons

An icon before the label. variant="destructive" is the red row.

Checkboxes

DropdownMenuCheckboxItem for options that toggle independently.

Checkboxes Icons

Same toggles, with an icon in the row.

Radio Group

DropdownMenuRadioGroup plus DropdownMenuRadioItem when only one value can be on.

Radio Icons

Exclusive choices with an icon in each row.

Destructive

variant="destructive" on the row that cannot be undone. Separate it from the rest.

Avatar

An Avatar as the trigger. Account, billing, sign out.

Complex

Groups, icons, checkboxes, radios, and nested submenus in one menu.

RTL

Wrap with DirectionProvider and dir="rtl". Submenus open toward the start.

API

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem takes checked and onCheckedChange. DropdownMenuRadioGroup takes value and onValueChange. DropdownMenuLabel and DropdownMenuSubTrigger take inset.

Keyboard

Type a letter to jump to the next item that starts with it.

Notes

onSelect dismisses the menu. Call event.preventDefault() if a checkbox should stay open.

With other components

Questions

Related