Context Menu

ContextMenu combines a target area with the existing Menu component. It renders the menu in a portal, opens on a right-click, positions it near the pointer, keeps it inside the viewport, and supports keyboard invocation with Shift + F10 or the Context Menu key.

Basic usageCopy Anchor Link

<ContextMenu
  aria-label="Project actions"
  entries={[
    { key: 'open', label: 'Open' },
    { key: 'rename', label: 'Rename', shortcut: 'F2' },
    { type: 'divider' },
    { key: 'delete', label: 'Delete', danger: true },
  ]}
  onSelect={(key) => handleProjectAction(project, key)}
>
  <ProjectRow project={project} />
</ContextMenu>

The target can be a card, table row, list item, canvas region, button, or any other React content. entries uses the same MenuEntry[] type as Menu, including icons, descriptions, images, shortcuts, labels, dividers, disabled items, danger actions, and nested submenus.

Keyboard and dismissalCopy Anchor Link

Focus the target and press Shift + F10 or the keyboard Context Menu key to open the menu without a pointer. Escape closes it and returns focus to the target. By default, a mousedown outside the menu, scrolling, or menu selection closes it; control these behaviors with closeOnOutsideClick, closeOnEscape, and closeOnSelect.

<ContextMenu
  entries={actions}
  closeOnSelect={false}
  menuProps={{ selectable: true, selectedKeys: selectedKeys }}
>
  <button type="button">Focus and use Shift + F10</button>
</ContextMenu>

Controlled state and positioningCopy Anchor Link

Use open and onOpenChange when an application owns the menu lifecycle. The callback receives the next state and the pointer position. position can provide a controlled anchor point in viewport coordinates; otherwise the component uses the most recent pointer or keyboard target position.

<ContextMenu
  open={open}
  position={{ x: 240, y: 180 }}
  onOpenChange={(nextOpen, point) => {
    setOpen(nextOpen);
    if (point) setLastPoint(point);
  }}
  entries={actions}
>
  <CanvasRegion />
</ContextMenu>

offset controls the distance between the pointer and the menu. The component clamps both coordinates so that the menu remains visible inside the viewport. Use menuWidth or menuProps to customize the shared Menu size, variant, keyboard behavior, selection, max height, and footer. Set preventDefault={false} when the browser's native context menu should remain available, or disabled to disable the context-menu behavior for a target.

API ReferenceCopy Anchor Link

Use Menu directly when the menu is already visible in the page, and ButtonMenu when a visible button should own the trigger. Use ContextMenu when actions are tied to a target and should appear at the pointer location.