Overlays

DropdownMenu

A menu of actions launched from a button.

Client component8 exports

Roving focus, type-ahead, arrow-key navigation and collision-aware positioning come from Radix. Items support a danger tone for destructive actions and an optional keyboard-shortcut hint.

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
} from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/dropdown-menu.

This component carries its own "use client" directive. You can still render it from a Server Component — you simply cannot pass it a function prop, because functions do not serialise across the boundary.

Examples

Action menu

Open it with Enter, then navigate with the arrow keys — disabled items are skipped automatically.

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Manage</DropdownMenuLabel>
    <DropdownMenuItem>
      Edit<DropdownMenuShortcut>Ctrl E</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem disabled>Archive</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem tone="danger">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

DropdownMenu props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
open	`boolean`		Controlled open state. Omit for uncontrolled use.
onOpenChange	`(open: boolean) => void`		Called when the open state should change.
tone	`"default" \| "danger"`	`"default"`	Styles an item as a destructive action. Set on DropdownMenuItem.
sideOffset	`number`	`6`	Distance from the trigger. Set on DropdownMenuContent.

Accessibility

Arrow keys move between items; disabled items are skipped.
Typing letters jumps to the matching item.
Escape closes the menu and returns focus to the trigger.
The trigger reports `aria-expanded` and `aria-haspopup`.
Shortcut hints are `aria-hidden`, so item names are not padded with “Ctrl E”.
The menu repositions to stay within the viewport.