ContextMenu

Right-click menu anchored to a single host element. Shares sections / MenuContent with DropdownMenu. The child must be a DOM element Pressable can attach a ref to (e.g. a div).

Examples

Default

Wrap a surface and pass menu sections. Right-click (or the platform context-menu gesture) opens the menu.

import { ContextMenu } from '@var-ui/react';

<ContextMenu sections={[{ items: [{ id: 'copy', label: 'Copy' }] }]}>
  <div>Right-click me</div>
</ContextMenu>

Sectioned actions

Group related commands into labeled sections — the same shape as DropdownMenu.

import { ContextMenu } from '@var-ui/react';

<ContextMenu
  sections={[
    {
      label: 'Edit',
      items: [
        { id: 'rename', label: 'Rename' },
        { id: 'duplicate', label: 'Duplicate' },
      ],
    },
    {
      label: 'Clipboard',
      items: [
        { id: 'copy', label: 'Copy' },
        { id: 'paste', label: 'Paste' },
        { id: 'delete', label: 'Delete', danger: true },
      ],
    },
  ]}
>
  <div>Project card — right-click for actions</div>
</ContextMenu>

Props

Accessibility

Opening is pointer-driven (context menu). Once open, keyboard navigation matches DropdownMenu (arrows, Enter, Escape). Ensure the host surface is large enough to target and that essential actions are also available without right-click for keyboard-only users.