ContextMenu

Playground

Installation

pnpm add @tessinaui/ui

Usage

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
} from "@tessinaui/ui";

<ContextMenu>
  <ContextMenuTrigger asChild>
    <div>Right-click anywhere in this region</div>
  </ContextMenuTrigger>

  <ContextMenuContent>
    <ContextMenuItem leadingIcon={<Copy />} shortcut="⌘C">Copy</ContextMenuItem>
    <ContextMenuItem leadingIcon={<Scissors />} shortcut="⌘X">Cut</ContextMenuItem>
    <ContextMenuItem leadingIcon={<Edit />}>Rename</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem leadingIcon={<Trash2 />} intent="error" shortcut="⌘⌫">
      Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Showcase

When to use ContextMenu vs. DropdownMenu

Discoverability tradeoff (per Nielsen Norman Group): context menus are powerful but invisible. If the action is critical, also expose it through a visible affordance — a button, a kebab icon, or a keyboard shortcut shown in a tooltip.

Anatomy

<ContextMenu>
  <ContextMenuTrigger>…</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel />
    <ContextMenuItem />
    <ContextMenuCheckboxItem />
    <ContextMenuRadioGroup>
      <ContextMenuRadioItem />
    </ContextMenuRadioGroup>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger />
      <ContextMenuSubContent />
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

Trigger area

ContextMenuTrigger renders a <div> by default. The menu opens on right-click anywhere inside that region (or on long-press for touch). To use an existing element as the trigger, pass asChild:

<ContextMenuTrigger asChild>
  <table>
    <tbody>{/* … */}</tbody>
  </table>
</ContextMenuTrigger>

Size

ContextMenuContent accepts a size (xs | sm | md | lg | xl, default md) that scales item padding, font size, and the gap between items. Independent of rounded.

<ContextMenuContent size="sm">…</ContextMenuContent>

Rounded

Standalone corner-radius axis matching the five-value enum used by AlertDialog, HoverCard, and Popover.

<ContextMenuContent rounded="lg">…</ContextMenuContent>

ContextMenuSubContent automatically inherits the same rounded value via context, so submenus' corners match the parent.

Width

ContextMenuContent also accepts width to bound the popup horizontally:

Items

ContextMenuItem accepts:

Checkbox + radio items

<ContextMenuLabel>View</ContextMenuLabel>
<ContextMenuCheckboxItem checked={preview} onCheckedChange={setPreview}>
  Show preview
</ContextMenuCheckboxItem>

<ContextMenuLabel>Sort by</ContextMenuLabel>
<ContextMenuRadioGroup value={sort} onValueChange={setSort}>
  <ContextMenuRadioItem value="name">Name</ContextMenuRadioItem>
  <ContextMenuRadioItem value="date">Date</ContextMenuRadioItem>
</ContextMenuRadioGroup>

Sub-menus

<ContextMenuSub>
  <ContextMenuSubTrigger leadingIcon={<Share2 />}>Share</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Copy link</ContextMenuItem>
    <ContextMenuItem>Email</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

The chevron in ContextMenuSubTrigger flips automatically based on the content's dir (right-pointing in LTR, left-pointing in RTL).

RTL

Pass dir="rtl" on ContextMenuContent (or wrap in a dir="rtl" container). Sub-menu chevrons flip and inset spacing follows the reading direction.

<ContextMenuContent dir="rtl">
  <ContextMenuItem leadingIcon={<Copy />}>نسخ</ContextMenuItem>
</ContextMenuContent>

Accessibility

• Built on @base-ui/react/context-menu with W3C ARIA semantics: the popup uses role="menu", items use role="menuitem" (or menuitemcheckbox / menuitemradio).
• Opens on right-click (contextmenu event) and long-press (touch).
• Keyboard navigation: arrow keys move between items, Enter activates, Escape closes, sub-menus open on right-arrow (or left-arrow in RTL).
• The trigger is announced as an actionable region. The popup's items are announced one by one as focus moves.
• Use intent="error" for destructive items so assistive tech surfaces the semantic colour via the rendered text.
• Always offer a non-context-menu way to invoke critical actions (toolbar button, keyboard shortcut shown in a tooltip) — context menus are invisible until invoked.

API Reference

ContextMenu (root)

Re-exports BaseContextMenu.Root from Base UI. Accepts the standard Base UI ContextMenu Root props.

ContextMenuTrigger

ContextMenuContent

ContextMenuItem

Sub-components

ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuPortal, ContextMenuGroup — all accept className and the Base UI primitive's native props.

Notes

• Built on @base-ui/react/context-menu — Base UI's name for the same primitive Radix calls ContextMenu and shadcn ships as the ContextMenu component.
• Most parts (Item, Group, Separator, CheckboxItem, RadioItem, SubmenuRoot, SubmenuTrigger) are reused from Base UI's Menu primitive — Base UI itself re-exports them.
• The popup positions at the cursor on the side you'd expect: bottom-end of cursor in LTR, bottom-start in RTL.