Dropdown Menu

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuRadioGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from "@timelycare/helix-ui"

Props

interface DropdownMenuItemProps {
  disabled?: boolean
  onSelect?: () => void
  className?: string
  children: React.ReactNode
}

interface DropdownMenuCheckboxItemProps extends DropdownMenuItemProps {
  checked?: boolean
  onCheckedChange?: (checked: boolean) => void
}

Design Tokens

Container

Item Sizing

Typography

Icons & Indicators

Separator

Item Variants

Choosing a Variant

• Use default for actions (Profile, Logout, Delete)
• Use checkbox for independent toggles (Show Status Bar)
• Use radio for mutually exclusive choices (Panel Position)
• Use icon for items with contextual icons

States

Common Patterns

Basic Menu

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>
      Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Submenu

<DropdownMenuSub>
  <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <DropdownMenuItem>Email</DropdownMenuItem>
    <DropdownMenuItem>Message</DropdownMenuItem>
  </DropdownMenuSubContent>
</DropdownMenuSub>

Checkbox & Radio Items

<DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
  Status Bar
</DropdownMenuCheckboxItem>

<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
  <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
  <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
  <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>

Action Menu with Icons

Row-level action menus with icon indicators and destructive actions.

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon">
      <MoreHorizontal className="size-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>
      <Pencil className="size-4 mr-2" />
      Edit
    </DropdownMenuItem>
    <DropdownMenuItem>
      <Copy className="size-4 mr-2" />
      Duplicate
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive">
      <Trash2 className="size-4 mr-2" />
      Delete
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Icon Spacing

• Icon to text: mr-2 (8px)
• Icon size: size-4 (16px)
• Destructive items: text-destructive on the item

Avatar Trigger

<DropdownMenuTrigger asChild>
  <Button variant="ghost" className="relative h-10 w-10 rounded-full">
    <Avatar><AvatarImage src="/user.jpg" /></Avatar>
  </Button>
</DropdownMenuTrigger>

Accessibility

• Built on Radix DropdownMenu — handles keyboard and focus automatically
• Keyboard: Enter/Space to open, Arrow keys to navigate, Enter to select, Escape to close
• Screen reader: announces menu role, item count, and selection
• Typeahead search supported within menu items

Gotchas

See Also

• Related Components: Context Menu (right-click menu), Menubar (persistent menu bar)
• Accessibility: Navigation Accessibility — Menu ARIA patterns
• Patterns: Component Match — Menu component selection

Last updated: February 9, 2026