Dropdown Menu
Contextual menu with selectable items and keyboard navigation, built on Radix UI.
Installation
npx paubha@latest add dropdown-menuUsage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary">Open menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Edit</DropdownMenuItem>
<DropdownMenuItem destructive>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Items have five states: default, hover (bg-secondary-hover), keyboard focus
(bg-secondary plus the glow-focus ring, via focus-visible so it only shows
for keyboard-driven focus), pressed (bg-brand-subtle with fg-brand text) and
disabled (fg-disabled). destructive swaps every fill and the label to the
error tint.
The panel is portalled to <body> on the --z-popover layer, so a menu opened
from inside a Dialog or Modal renders above it.
API reference
DropdownMenu and DropdownMenuTrigger are direct re-exports of Radix's Root/Trigger.
DropdownMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
| leadingIcon | ReactNode | — | Instance-swap icon slot before the label, 16px. |
| shortcut | ReactNode | — | Keyboard shortcut text shown at the end of the row. |
| destructive | boolean | false | Styles the item as a destructive action (e.g. "Delete"). |
| disabled | boolean | — | Prevents selecting this item. |
| onSelect | (event: Event) => void | — | Called when the item is selected. |
Accessibility
Accessibility
Roles.
role="menu", itemsrole="menuitem".Keyboard. Arrow keys navigate (disabled items are skipped), Home/End jump, typing a letter jumps to a matching item, Enter/Space selects, Escape closes and returns focus to the trigger.
Focus. Trapped within the open menu; a visible
glow-focusring shows for keyboard-driven focus specifically.