DropdownMenu

Quick Preview

Composition

Use this public composition when building DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuLabel
    ├── DropdownMenuItem
    └── DropdownMenuSeparator

Usage

<DropdownMenu>
  <DropdownMenuTrigger render={<Button />}>Actions</DropdownMenuTrigger>
  <DropdownMenuContent><DropdownMenuItem>Rename</DropdownMenuItem></DropdownMenuContent>
</DropdownMenu>

Examples

Sizes and Destructive Items

Use menu size for density and item variant="destructive" for dangerous actions.

Props

Accessibility

• Preserve the documented DropdownMenu composition so labels, triggers, content, and controls remain connected.
• Provide visible labels or accessible names for interactive controls.
• Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
• Do not communicate state with color alone; include text, icons, or helper copy.