DropdownMenu

A contextual menu that reveals a list of actions or options when its trigger is activated.

stable
since v0.1.0
4.2 kB
overlay
menu
accessible

Preview

tsx

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTriggerButton,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTriggerButton>Options</DropdownMenuTriggerButton>
      <DropdownMenuContent>
        <DropdownMenuLabel>Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="danger">Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Variants

With icons

Add a leading icon to any DropdownMenuItem via the icon prop.

Preview

Open

tsx

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTriggerButton,
} from '@arshad-shah/cynosure-react';
import { LogOut, Settings, User } from 'lucide-react';

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTriggerButton>My account</DropdownMenuTriggerButton>
      <DropdownMenuContent>
        <DropdownMenuItem icon={<User size={14} />}>Profile</DropdownMenuItem>
        <DropdownMenuItem icon={<Settings size={14} />}>Settings</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem icon={<LogOut size={14} />} variant="danger">
          Sign out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

With shortcuts

Render keyboard shortcut hints using DropdownMenuShortcut. Each character is wrapped in a Kbd keycap automatically.

Preview

Open

tsx

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTriggerButton,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTriggerButton>Edit</DropdownMenuTriggerButton>
      <DropdownMenuContent>
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Undo
          <DropdownMenuShortcut>⌘Z</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Redo
          <DropdownMenuShortcut>⌘Y</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Cut
          <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Copy
          <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Paste
          <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          Find
          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Checkbox and radio items

Use DropdownMenuCheckboxItem for toggleable items and DropdownMenuRadioItem inside a DropdownMenuRadioGroup for mutually exclusive selections.

Preview

Open

tsx

import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTriggerButton,
} from '@arshad-shah/cynosure-react';
import { useState } from 'react';

export default function Example() {
  const [showGrid, setShowGrid] = useState(false);
  const [showRulers, setShowRulers] = useState(true);
  const [density, setDensity] = useState('comfortable');

  return (
    <DropdownMenu>
      <DropdownMenuTriggerButton>View</DropdownMenuTriggerButton>
      <DropdownMenuContent>
        <DropdownMenuLabel>Show</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
          Grid
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>
          Rulers
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>Density</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
          <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="comfortable">Comfortable</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="spacious">Spacious</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

API

PropTypeDefaultDescription

container

HTMLElement|(() => HTMLElement)

—

className

string

—

Accessibility

The menu follows the ARIA Menu Button pattern: role="menu" on the content, role="menuitem" on each item.
Arrow keys navigate between items; Home / End jump to first / last item.
Pressing Esc closes the menu and returns focus to the trigger.
DropdownMenuCheckboxItem carries role="menuitemcheckbox"; DropdownMenuRadioItem carries role="menuitemradio".
DropdownMenuShortcut is aria-hidden="true" — decorative only, not announced.

Recipes

Use DropdownMenuSub + DropdownMenuSubTrigger + DropdownMenuSubContent for nested sub-menus.
Use DropdownMenuTrigger asChild instead of DropdownMenuTriggerButton to compose with any custom trigger element.
Add description to any item for a muted second line of context below the label.
Use variant="danger" on destructive items for red highlight styling.