ContextMenu

A right-click (or long-press) menu that surfaces contextual actions for a target element.

stable
since v0.1.0
3.5 kB
overlay
menu
accessible

Preview

tsx

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div
          style={{
            padding: '2rem',
            border: '1px dashed var(--cynosure-color-border-default, #d4d4d4)',
            borderRadius: '0.5rem',
            textAlign: 'center',
            userSelect: 'none',
          }}
        >
          Right-click anywhere inside this box
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Cut
          <ContextMenuShortcut>⌘X</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Copy
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Paste
          <ContextMenuShortcut>⌘V</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="danger">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Variants

With submenu

Nest ContextMenuSub + ContextMenuSubTrigger + ContextMenuSubContent to render hierarchical actions.

Preview

Open

tsx

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div
          style={{
            padding: '2rem',
            border: '1px dashed var(--cynosure-color-border-default, #d4d4d4)',
            borderRadius: '0.5rem',
            textAlign: 'center',
            userSelect: 'none',
          }}
        >
          Right-click for nested actions
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuItem>Open in new tab</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Copy link</ContextMenuItem>
            <ContextMenuItem>Email</ContextMenuItem>
            <ContextMenuItem>Send via chat</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="danger">Move to trash</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

Checkbox and radio items

Use ContextMenuCheckboxItem for toggles and ContextMenuRadioItem inside a ContextMenuRadioGroup for mutually-exclusive selection.

Preview

Open

tsx

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from '@arshad-shah/cynosure-react';
import { useState } from 'react';

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

  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div
          style={{
            padding: '2rem',
            border: '1px dashed var(--cynosure-color-border-default, #d4d4d4)',
            borderRadius: '0.5rem',
            textAlign: 'center',
            userSelect: 'none',
          }}
        >
          Right-click to change view options
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel>Show</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
          Grid
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={showRulers} onCheckedChange={setShowRulers}>
          Rulers
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuLabel>Density</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup value={density} onValueChange={setDensity}>
          <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
          <ContextMenuRadioItem value="comfortable">Comfortable</ContextMenuRadioItem>
          <ContextMenuRadioItem value="spacious">Spacious</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

With shortcuts

ContextMenuShortcut renders kbd-style chips after the item label. They are decorative and not announced.

Preview

Open

tsx

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild>
        <div
          style={{
            padding: '2rem',
            border: '1px dashed var(--cynosure-color-border-default, #d4d4d4)',
            borderRadius: '0.5rem',
            textAlign: 'center',
            userSelect: 'none',
          }}
        >
          Right-click to see shortcuts
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          Undo
          <ContextMenuShortcut>⌘Z</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Redo
          <ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          Find
          <ContextMenuShortcut>⌘F</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          Replace
          <ContextMenuShortcut>⌥⌘F</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

API

PropTypeDefaultDescription

container

HTMLElement|(() => HTMLElement)

—

className

string

—

Accessibility

Opens via the native contextmenu event (right-click, two-finger tap, long-press) or the platform menu key while the trigger has focus.
ContextMenuContent carries role="menu"; items expose role="menuitem".
Arrow keys move between items; Home / End jump to the first / last; type-ahead also selects the first matching item.
Pressing Esc closes the menu and returns focus to the previously focused element.
ContextMenuCheckboxItem reports role="menuitemcheckbox"; ContextMenuRadioItem reports role="menuitemradio".

Recipes

Wrap your trigger in asChild so the right-click handler attaches to your own element rather than an extra wrapper div.
Mirror the same item set in a toolbar or DropdownMenu so users can rely on either surface.
Use ContextMenuLabel to group nameable sections inside long menus.
Put destructive actions last under a ContextMenuSeparator so they are never the default landing item.