Dropdown Menu

A menu of actions or links that opens from a trigger button. Use it for row actions, a "more options" overflow button, account menus, or any compact list of commands. For a horizontal bar of menus (File, Edit, View), use Menubar instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/dropdown-menu

Usage

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/cubby-ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    <DropdownMenuItem />
  </DropdownMenuContent>
</DropdownMenu>

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuGroupLabel
    │   └── DropdownMenuItem
    ├── DropdownMenuLinkItem
    ├── DropdownMenuLabel
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    ├── DropdownMenuShortcut   (inside an item)
    ├── DropdownMenuSeparator
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent

DropdownMenuContent composes the portal, positioner, and popup internally, so you place items directly inside it.

Examples

With Icons and Shortcuts

Place an icon beside the label and a DropdownMenuShortcut at the end of an item.

With Checkboxes

Use DropdownMenuCheckboxItem for toggleable options. The checkmark sits in a reserved column on the right, so labels stay put as items toggle.

With Switch

Set indicator="switch" on DropdownMenuCheckboxItem to swap the checkmark for a switch. Visual only: the item keeps its menuitemcheckbox role, the row stays the click target, and the menu stays open on toggle.

With Radio Group

Use DropdownMenuRadioGroup with DropdownMenuRadioItem for mutually exclusive options. Radio items use the same right-aligned checkmark as checkbox items.

Aligning Items With and Without Icons

Menu items lay their icon out inline, so an item with no icon starts its label further left than its neighbours. Add inset to the icon-less items to give them the same left padding an icon would have occupied, and every label lines up on one edge.

inset is available on DropdownMenuItem, DropdownMenuLinkItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuGroupLabel, and DropdownMenuSubTrigger. Only reach for it in menus that actually mix the two kinds of item.

With Sub Menu

Nest a DropdownMenuSub to open a submenu on hover.

Animated (Detached Triggers)

Multiple triggers share one menu that moves between them and slides content in or out based on activation direction.

API Reference

The DropdownMenu component is built on top of Base UI's Menu. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Menu documentation.

One exception: DropdownMenuSub renders Menu.SubmenuRoot, which does not accept modal, openOnHover, handle, triggerId or defaultTriggerId. Those belong on the root DropdownMenu.

Props

DropdownMenuContent

Dropdown container with positioning and animations. Composes Menu.Portal, Menu.Positioner, and Menu.Popup. Props are forwarded to Menu.Popup.

DropdownMenuItem

Individual menu item. Wraps Base UI's Menu.Item.

DropdownMenuLinkItem

Menu item that renders as an anchor (<a>) for navigation links. Wraps Base UI's Menu.LinkItem.

DropdownMenuCheckboxItem

Toggleable menu item. Wraps Base UI's Menu.CheckboxItem. The indicator sits in a reserved column on the right, matching Select.

DropdownMenuRadioItem

Mutually exclusive menu item. Wraps Base UI's Menu.RadioItem. Uses the same right-aligned checkmark as DropdownMenuCheckboxItem.

DropdownMenuLabel

Non-interactive label for grouping items.

DropdownMenuGroupLabel

Label for a menu group. Wraps Base UI's Menu.GroupLabel.

DropdownMenuSubTrigger

Item that opens a submenu on hover. Wraps Base UI's Menu.SubmenuTrigger.

DropdownMenuSubContent

Submenu container with positioning. Composes Menu.Portal, Menu.Positioner, and Menu.Popup. Props are forwarded to Menu.Popup.