Context Menus

ContextMenu shows actions scoped to a specific element, opened by right-click on desktop or long-press on touch. It mirrors the dropdown menu API (items, separators, shortcuts, checkbox/radio items, submenus) but is triggered by the platform context gesture rather than a button.

Live demo

The interactive story below runs from the deployed Storybook. Right-click inside the dashed area to open the menu.

Usage

Source: context-menu.tsx

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from "@beacon/design-system";

<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent className="w-64">
    <ContextMenuItem inset>
      Back
      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset disabled>
      Forward
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem inset>Reload</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Parts

Part	Role
`ContextMenu`	Root state container.
`ContextMenuTrigger`	The element that responds to right-click / long-press.
`ContextMenuContent`	The floating menu surface.
`ContextMenuItem`	A selectable action. `inset` aligns labels that have no leading icon; `disabled` greys it out.
`ContextMenuCheckboxItem` / `ContextMenuRadioItem`	Toggleable and single-select items.
`ContextMenuLabel`	Non-interactive section heading.
`ContextMenuSeparator`	Divider between groups.
`ContextMenuShortcut`	Right-aligned keyboard hint.
`ContextMenuSub*`	Nested submenu (`Sub`, `SubTrigger`, `SubContent`).

When to use

Object-specific actions revealed by right-click or long-press (a row, a canvas item, a file).
Power-user shortcuts that supplement, but do not replace, visible controls.

Do not make a context menu the only way to reach an important action; provide a visible affordance too. For a button-triggered action list, use a pull-down button.