Dropdown Menu
A menu of actions displayed to the user when a trigger is activated. Supports items, checkboxes, radio groups, sub-menus, and keyboard shortcuts.
Installation
pnpm
pnpm dlx @hex-core/cli add dropdown-menuAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state |
onOpenChange | function | — | Callback on open state change: (open: boolean) => void |
modal | boolean | true | When true, interaction outside the menu is blocked |
AI Guidance
When to use
Use for action menus triggered by a button: user menus, row-action menus, toolbar overflow. Include DropdownMenuLabel for context, DropdownMenuSeparator for grouping.
When not to use
Don't use for navigation between pages (use NavigationMenu or links). Don't use for selection inputs (use Select or Combobox). Don't use for right-click menus (use ContextMenu).
Common mistakes
- Using DropdownMenu as a form Select (use Select instead)
- Putting interactive elements directly in the trigger without asChild
- Too many items without grouping (use DropdownMenuLabel + DropdownMenuSeparator)
- Forgetting DropdownMenuShortcut for keyboard-accessible actions
Accessibility
Full keyboard navigation: arrow keys, Home, End, typeahead, Escape. Radix handles role='menu', role='menuitem', and aria-labelledby.
Related components
Token budget: 700