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.

With Radio Group

Use DropdownMenuRadioGroup with DropdownMenuRadioItem for mutually exclusive options.

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.

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.

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.