Docs › Components › Dropdown Menu

Shadcn Dropdown Menu

The shadcn/ui Dropdown Menu shows a list of actions triggered by a button, styled with Tailwind CSS v4. Built on Base UI, it supports labels, separators, checkbox and radio items, and submenus, with full keyboard navigation. Dropdown menus power user menus, row actions, and overflow menus across ShadcnStore blocks.

Key features

• Action menus with items, labels, and separators.
• Checkbox and radio items for toggles and single-choice groups.
• Nested submenus for grouped commands.
• Full keyboard navigation and focus management.
• Trigger composes with any Button via the render prop.

Installation

npx shadcn@latest add dropdown-menu

Usage

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

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>Open</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Checkbox, radio, and submenus

Menus can hold stateful checkbox items, a single-choice radio group, and nested submenus via DropdownMenuSub. Open the menu to try each.

import {
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from "@/components/ui/dropdown-menu"

<DropdownMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
  Show grid
</DropdownMenuCheckboxItem>

<DropdownMenuSub>
  <DropdownMenuSubTrigger>More tools</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>…</DropdownMenuSubContent>
</DropdownMenuSub>

Anatomy

Part	Purpose
DropdownMenu	Root that manages open state.
DropdownMenuTrigger	Button that opens the menu.
DropdownMenuContent	The floating panel, rendered in a portal.
DropdownMenuItem	A clickable action.
DropdownMenuLabel / DropdownMenuSeparator	Group heading and divider.
DropdownMenuSub	A nested submenu.

Composition

Use the render prop on DropdownMenuTrigger to compose with a Button. Put label text as children on the outer component:

<DropdownMenuTrigger render={<Button variant="outline" />}>Open</DropdownMenuTrigger>

Accessibility

• The trigger opens the menu with Enter, Space, or arrow keys; items are reachable with arrow keys and selected with Enter.
• Give an icon-only trigger an aria-label (for example "Open row actions").
• Use DropdownMenuLabel to title a group, not to convey an action; labels are not focusable.

When to use the Dropdown Menu

Use a Dropdown Menu for a compact list of actions or commands attached to a button: account menus, table row actions, and overflow ("more") menus. For choosing a value stored in a form, use a Select. For a blocking task or a form, use a Dialog, and for contextual info, a Popover.

Used in these blocks

• App shells: user and account menus.
• Datatables: row action menus.
• Widgets: card overflow menus.

Related components

The trigger is usually a Button, often icon-only with a Badge count. It appears in Data Table rows and Card headers. For value selection instead of actions, use a Select.

FAQ

What is the shadcn dropdown menu used for?

The Dropdown Menu shows a list of actions triggered by a button, such as row actions in a table, a user account menu, or overflow menus.

What is the difference between Dropdown Menu and Select?

Dropdown Menu is for actions and commands. Select is for choosing a value from a list that is stored in form state.

Can a dropdown menu have submenus and checkboxes?

Yes. It supports DropdownMenuSub for submenus, DropdownMenuCheckboxItem for toggles, and DropdownMenuRadioGroup for single-choice groups.

How do I keep the menu open after clicking an item?

Prevent the default close by calling event.preventDefault() in the item's onSelect, which is useful for checkbox items you toggle repeatedly.