Dropdown Menu

Contextual menu with selectable items and keyboard navigation, built on Radix UI.

Installation

npx asteria-ui add dropdown-menu

Usage

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>

Hover and keyboard focus share one unified highlighted state (data-[highlighted]:bg-bg-secondary-hover) — Radix moves real DOM focus for both, by design, so there's no clean way to give them different backgrounds through CSS alone. The glow-focus ring is layered on top via focus-visible, which correctly shows only for real keyboard-driven focus — the part that actually matters for accessibility.

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

Roles. role="menu", items role="menuitem".
Keyboard. Arrow keys navigate, Enter/Space selects, Escape closes.
Focus. Trapped within the open menu; a visible glow-focus ring shows for keyboard-driven focus specifically.

Installation

Usage

API reference

DropdownMenuItem

Accessibility

On this page