ContextMenu

A menu that opens on right-click, built on Base UI Context Menu, with submenus, groups, and checkbox and radio items.

Installation

import { ContextMenu } from "@o/pipeline/experimental/components/context-menu";

Default

Button triggers

ContextMenu.Trigger exposes the menu’s open state through its render callback. When composing it with a Pipeline Button, pass that state to the Button’s pressed prop so the button stays pressed for the full menu lifecycle. The same mapping works when the Button is nested inside a wrapper.

import { Button } from "@o/pipeline/experimental/components/button";

<ContextMenu.Trigger
  render={(triggerProps, state) => (
    <Button {...triggerProps} pressed={state.open}>
      Direct Button trigger
    </Button>
  )}
>
  Direct Button trigger
</ContextMenu.Trigger>

<ContextMenu.Trigger
  render={(triggerProps, state) => (
    <div {...triggerProps}>
      <Button pressed={state.open}>Wrapped Button trigger</Button>
    </div>
  )}
>
  Wrapped Button trigger
</ContextMenu.Trigger>