Dropdown Menu

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>

Examples

With Icons and Shortcuts

Add icons and keyboard shortcuts to menu items.

With Checkboxes

Include checkbox menu items for toggleable options.

With Radio Group

Use radio groups for mutually exclusive options.

With Sub Menu

Create nested submenus for hierarchical navigation.

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.

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.