Layout UI

Dropdown Menu

A menu anchored to a trigger button, built on Base UI Menu. Supports groups, labels, separators, keyboard shortcuts, checkboxes, radio groups, sub-menus, and a destructive item variant.

Preview

Installation

bash
npx shadcn@latest add @layout/dropdown-menu

Usage

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

Examples

With checkboxes

Radio group

Guidelines for AI agents

Use for actions triggered by a single button (e.g. account menu, row actions, sort options). Wrap items in DropdownMenuGroup and add DropdownMenuLabel for semantic sections. Apply variant="destructive" on irreversible items like sign out or delete.

Never

  • Neveruse DropdownMenu for navigation between pages; use NavigationMenu or plain links instead
  • Neveropen a dropdown on right-click; use ContextMenu for that pattern
  • Neverput more than two levels of sub-menus; flatten or move to a dedicated page
  • Neverhardcode colours on items; use the variant prop and token utilities only

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-accent--layout-accent-fg--layout-danger--layout-border--layout-radius--layout-shadow-md--layout-duration-base