ttolbel UI

Component

Context menu

A frosted, grouped menu that opens on right-click or long-press, with hairline group dividers and red styling for destructive actions. Focus and dismissal follow standard context-menu behavior.

Standalone

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 list row opens this: a preview pinned above grouped actions, separated by a divider.

Item #4821

Updated yesterday

Hold to act

context-menu-example.tsx
<NativeContextMenu
  preview={<TradeSummary />}
  groups={[
    { items: [{ label: "View details", onSelect: () => {} }] },
    { items: [{ label: "Report a problem", style: "destructive", onSelect: () => {} }] },
  ]}
>
  <TradeRow />
</NativeContextMenu>

Capabilities

PropTypeDescription
childrenrequiredReact.ReactNode-
groupsrequiredNativeContextMenuGroup[]-
previewReact.ReactNode-
classNamestring-