Context Menu

Right-click (or long-press) menu (Base UI Context Menu).

Import

import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '@marbleui/ui'

Props

<ContextMenu>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
trigger *required	`ReactNode`	`—`	The area that opens the menu on right click / long press.
className	`string`	`—`

<ContextMenuItem>

Prop	Type	Default
children *required	`ReactNode`	`—`
destructive	`boolean`	`—`
disabled	`boolean`	`—`
icon	`ReactNode`	`—`
onClick	`() => void`	`—`
shortcut	`string`	`—`

<ContextMenuSeparator>

No props of its own.

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: Base UI ContextMenu. Follow the primitive's docs for the full keyboard map.

Usage notes

Menu opened by right-click or long press on an area, for item-specific actions such as Copy or Delete. For a menu opened from a button use Menu; for a File/Edit style bar use Menubar.

<ContextMenu trigger={<div className="h-40 w-72">Right-click here</div>}>
  <ContextMenuItem shortcut="⌘C">Copy</ContextMenuItem>
  <ContextMenuSeparator />
  <ContextMenuItem destructive onClick={remove}>Delete</ContextMenuItem>
</ContextMenu>

ContextMenuItem takes onClick, icon, shortcut, destructive and disabled. The shortcut is display only and does not bind a key.
Built on Base UI Context Menu, not React Aria, so items use onClick rather than onAction.
Right-click is not discoverable. Always offer the same actions elsewhere, for example in a Menu.

Example source · show

import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from './context-menu'

const Area = ({ label }: { label: string }) => (
  <div className="grid h-40 w-72 place-items-center rounded-xl border-2 border-dashed border-border-strong text-sm text-fg-muted">{label}</div>
)

export const styles = {
  Default: () => (
    <ContextMenu trigger={<Area label="Right-click here" />}>
      <ContextMenuItem shortcut="⌘C">Copy</ContextMenuItem>
      <ContextMenuItem shortcut="⌘V">Paste</ContextMenuItem>
      <ContextMenuItem shortcut="⌘D">Duplicate</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem destructive shortcut="⌫">Delete</ContextMenuItem>
    </ContextMenu>
  ),
  File: () => (
    <ContextMenu trigger={<div className="flex w-72 items-center gap-3 rounded-lg border border-border bg-surface p-3 text-sm text-fg">📄 quarterly-report.pdf</div>}>
      <ContextMenuItem>Open</ContextMenuItem>
      <ContextMenuItem>Rename</ContextMenuItem>
      <ContextMenuItem>Move to…</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem disabled>Share (no permission)</ContextMenuItem>
    </ContextMenu>
  ),
}

Source: packages/ui/src/context-menu/context-menu.tsx

Catalog

Category: overlays
Priority: Core
Primitive: react-aria
React Aria: MenuTrigger (trigger="contextMenu")
Base UI: Context Menu