Shadcn Dropdown Menu Components

Shadcn Dropdown Menu Component

The Shadcn Dropdown Menu shows a list of actions or options when a user clicks a trigger, such as a button, an avatar or a three dot icon. It keeps secondary actions out of the way until they are needed, which is why account menus, table row actions, editor toolbars and theme switchers almost always use one.

This collection ranges from a simple account menu to checkbox and radio items, submenus with shortcut hints, an Add block menu with icon tiles and a Light, Dark and System theme switcher. Every React dropdown menu component here is styled with shadcn/ui and Tailwind CSS on a menu primitive from Radix UI or Base UI, which takes care of focus management, keyboard navigation and positioning.

What is the Shadcn Dropdown Menu Component?

A dropdown menu is a button that opens a floating list of menu items. The list is rendered in a portal, positioned next to the trigger and flipped automatically when there is not enough space. Items can be plain actions, checkbox items that toggle on and off, radio items for a single choice or sub triggers that open a nested menu. Arrow keys move between items, typing a letter jumps to a matching item and Escape closes the menu and returns focus to the trigger.

Use a dropdown menu for actions. When the user picks a value for a form field, use a Select or a Combobox instead. For a menu that opens on right click, use a Context Menu, for a row of application menus like File and Edit, use a Menubar, and for free form content such as a small form, use a Popover.

Anatomy of the Shadcn Dropdown Menu

12 Shadcn Dropdown Menu Variants

Each dropdown menu variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic and icon triggers: A labelled account menu opened from a button, and a compact menu opened from a round ghost ellipsis button.
• With icons: Copy, Edit, Group and Clone actions with a muted leading icon on every item.
• Grouped and labelled items: Items split into groups with separators and labels, ending in a destructive Delete action.
• Checkbox and radio items: A framework list with independent checkbox items and a single choice picker built with a radio group, each with one disabled option.
• Submenus and shortcuts: Edit, Duplicate and Archive actions with shortcut hints, a More submenu with move options and a destructive Delete item.
• User menu: An avatar trigger that opens a menu with the user's name and email in the label and a Logout item.
• Rich items and links: An Add block menu with icon tiles and descriptions, and a help menu whose items render as links.
• Theme switcher: An icon button that shows the current theme and lets users pick Light, Dark or System.

How to Install the Shadcn Dropdown Menu Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a dropdown menu variant by its name:

npx shadcn@latest add @shadcnuikit/dropdown-menu1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Dropdown Menu Component

Wrap a Button in DropdownMenuTrigger with asChild, then list the actions inside DropdownMenuContent. Use onSelect to run an action when an item is chosen.

import { MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react"

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

export function RowActions({ onEdit, onDelete }: {
  onEdit: () => void
  onDelete: () => void
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" aria-label="Open row actions">
          <MoreHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuItem onSelect={onEdit}>
          <PencilIcon />
          Edit
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive" onSelect={onDelete}>
          <TrashIcon />
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Why Use the Shadcn Dropdown Menu Component

• Saves space: Secondary actions live behind one trigger instead of crowding the toolbar or table row.
• Full keyboard support: Arrow keys, typeahead, submenus and focus return are built into the primitive.
• Smart positioning: The content flips and shifts to stay inside the viewport and matches the trigger width by default.
• Rich item types: Actions, checkboxes, radio groups, labels, shortcuts and nested submenus cover almost every menu design.
• Themeable: Items, highlight colors and the destructive variant use your theme tokens and work in dark mode.

Common Dropdown Menu Use Cases

• Account menus: An avatar that opens profile, billing, settings and logout links.
• Table row actions: Edit, duplicate and delete behind a three dot button.
• View options: Checkbox items for visible columns and radio items for sort order.
• Theme switchers: Light, dark and system options in the header.
• Content editors: An Add block menu with descriptions for each block type.
• Split buttons: A chevron next to a primary action, joined with a Button Group.

Customizing the Shadcn Dropdown Menu

Every part accepts a className. Set a width on DropdownMenuContent, change align and sideOffset to adjust placement and style highlighted items with the data-highlighted attribute. Icons inside items are sized automatically, so you only add the icon component. Colors follow your theme variables, which you can generate with the free Theme Generator.

By default the content is as wide as its trigger, with a minimum of min-w-48. This menu gets a fixed width and aligns to the end of its trigger:

<DropdownMenuContent align="end" sideOffset={8} className="w-64">
  ...
</DropdownMenuContent>

Dropdown Menu Accessibility and Keyboard Support

The dropdown menu follows the WAI-ARIA menu button pattern. The trigger gets aria-haspopup and aria-expanded, the content has role="menu" and items use menuitem, menuitemcheckbox or menuitemradio roles. Focus moves into the menu when it opens and back to the trigger when it closes. Give icon only triggers an aria-label and hide decorative icons with aria-hidden, as the variants on this page do.

Dropdown Menu Best Practices

• Keep menus short; if a list grows past ten items, group it with labels or move rarely used actions into a submenu.
• Start each item with a verb, such as Edit, Duplicate or Delete.
• Mark destructive actions with variant="destructive" and separate them from safe actions.
• Avoid more than one level of submenus; deep nesting is hard to use with a mouse and on touch devices.
• Confirm irreversible actions with an Alert Dialog after the item is selected.
• Use a Select when the goal is to pick a form value rather than run an action.

Components Related to Dropdown Menu

Shadcn Dropdown Menu FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.