Component

Context menu

A frosted, grouped menu that opens on right-click or long-press, built on Radix's context menu primitive for correct focus and dismissal behavior, restyled to match iOS context menus exactly: blurred background, hairline group dividers, red for destructive actions.

The primitive

Right-click (or long-press) here

context menu.tsx

<NativeContextMenu
  groups={[
    { items: [
      { label: "Copy", onSelect: () => {} },
      { label: "Edit", onSelect: () => {} },
      { label: "Delete", style: "destructive", onSelect: () => {} },
    ] },
  ]}
>
  <Row />
</NativeContextMenu>

Example

Long-pressing a trade history row opens this: a preview pinned above two grouped actions, view receipt and report a problem, separated by a divider.

Trade #4821

450.00 USDT

Hold to act

context-menu-example.tsx

<NativeContextMenu
  preview={<TradeSummary />}
  groups={[
    { items: [{ label: "View receipt", onSelect: () => {} }] },
    { items: [{ label: "Report a problem", style: "destructive", onSelect: () => {} }] },
  ]}
>
  <TradeRow />
</NativeContextMenu>

Capabilities

Prop	Type	Description
childrenrequired	React.ReactNode	—
groupsrequired	NativeContextMenuGroup[]	—
preview	React.ReactNode	—
className	string	—