Dropdown Menu

A floating menu anchored to a trigger. Built on Radix UI DropdownMenu — handles focus management, keyboard navigation, and ARIA menu patterns automatically.

Built on Radix UI.

✓Full keyboard navigation — arrow keys, Enter, Escape, Tab
✓Focus is trapped within the menu while open
✓Supports grouped items with labels
✓Checkbox and radio item variants for toggleable options
✓Keyboard shortcut display with DropdownMenuShortcut
✓Sub-menus via DropdownMenuSub + DropdownMenuSubTrigger
✓Animated open/close with Tailwind data-state classes

import { Dropdown Menu }from "@aetherstack/ui"

dropdown menu.tsx

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open Menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Usage

With groups

Use DropdownMenuGroup and DropdownMenuLabel to organize items into named sections.

With checkboxes

Use DropdownMenuCheckboxItem for toggleable boolean options like view settings.

With shortcuts

Add DropdownMenuShortcut to display keyboard shortcut hints alongside items.

Props

Prop	Type	Default	Description

DropdownMenuTrigger

Prop	Type	Default	Description
asChild	boolean	false	Render as the child element instead of a button. Pass a Button component for proper styling.

DropdownMenuContent

Prop	Type	Default	Description
align	"start" \| "center" \| "end"	"center"	Alignment of the menu relative to the trigger.
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side for the menu to open on.
sideOffset	number	4	Offset in pixels from the trigger element.

DropdownMenuItem

Prop	Type	Default	Description
inset	boolean	false	Adds left padding to align with items that have icons.
disabled	boolean	false	Prevents interaction and applies reduced opacity.
onSelect	(e: Event) => void	—	Callback when the item is selected. Call e.preventDefault() to keep the menu open.

DropdownMenuLabel

Prop	Type	Default	Description
inset	boolean	false	Adds left padding to align with inset menu items.

DropdownMenuShortcut

Prop	Type	Default	Description
children	ReactNode	—	The keyboard shortcut string to display (e.g. ⌘S, ⌫, Ctrl+K).

* Required props

Accessibility

→Has role='menu' — screen readers announce it as a menu.
→Arrow keys move focus between items; Enter or Space selects.
→Escape closes the menu and returns focus to the trigger.
→Disabled items have aria-disabled='true' and are skipped during keyboard navigation.
→DropdownMenuLabel is decorative — use it for visual grouping only, not as an item.