ContextMenu

The same menu (and the same DropdownItems) as Dropdown, opened by right-click and positioned at the cursor instead of relative to a visible trigger element. Shares Dropdown's context/list-navigation wiring rather than duplicating the menu-item rendering logic.

<ContextMenu>
  ...
</ContextMenu>

Examples

children is the single element that gets the right-click handler; menu is the same DropdownItem list Dropdown renders:

<ContextMenu
  menu={
    <>
      <DropdownItem onSelect={() => copy()}>Copy</DropdownItem>
      <DropdownItem onSelect={() => paste()}>Paste</DropdownItem>
    </>
  }
>
  <Card padding="24">Right-click anywhere in this card</Card>
</ContextMenu>

Reach for ContextMenu only as a supplement to a visible way of reaching the same actions (a toolbar button, say) — right-click has no keyboard-only or touch equivalent, so it can't be the only way to open a menu of otherwise-unreachable actions.

Props