ContextMenu

Context menus that open at the pointer, sharing the same menu logic and parts as DropdownMenu: checkbox, radio, groups, submenus and full keyboard navigation.

Installation

Add component

pnpm dlx @elyri/cli@latest add context-menu

Examples

Basic

Right-click inside the area to open the menu at the pointer; the selection shows below.

Right-click this area

Selected: Nothing yet

import { useState } from 'react';

import { ContextMenu } from './components/elyri/ContextMenu';

export function Example() {
  const [selected, setSelected] = useState('Nothing yet');

  return (
    <div className="demo-ui-row">
      <ContextMenu>
        <ContextMenu.Trigger className="demo-context-area">Right-click this area</ContextMenu.Trigger>
        <ContextMenu.Content>
          <ContextMenu.Item onSelect={() => setSelected('Duplicate')}>Duplicate</ContextMenu.Item>
          <ContextMenu.Item onSelect={() => setSelected('Rename')}>Rename</ContextMenu.Item>
          <ContextMenu.Separator />
          <ContextMenu.Item onSelect={() => setSelected('Delete')} danger>
            Delete
          </ContextMenu.Item>
        </ContextMenu.Content>
      </ContextMenu>
      <span className="demo-ui-label">Selected: {selected}</span>
    </div>
  );
}

Checkbox, radio and submenu

The same capabilities as the dropdown menu: checkable items, single-select groups and nested submenus.

Right-click for options

Sort: name · Compact: on

import { useState } from 'react';

import { ContextMenu } from './components/elyri/ContextMenu';

export function Example() {
  const [sort, setSort] = useState('name');
  const [compact, setCompact] = useState(true);

  return (
    <div className="demo-ui-row">
      <ContextMenu>
        <ContextMenu.Trigger className="demo-context-area">Right-click for options</ContextMenu.Trigger>
        <ContextMenu.Content>
          <ContextMenu.Label>Sort by</ContextMenu.Label>
          <ContextMenu.RadioGroup value={sort} onValueChange={setSort}>
            <ContextMenu.RadioItem value="name">Name</ContextMenu.RadioItem>
            <ContextMenu.RadioItem value="date">Date modified</ContextMenu.RadioItem>
          </ContextMenu.RadioGroup>
          <ContextMenu.Separator />
          <ContextMenu.CheckboxItem checked={compact} onCheckedChange={setCompact}>
            Compact density
          </ContextMenu.CheckboxItem>
          <ContextMenu.Sub>
            <ContextMenu.SubTrigger>Open with</ContextMenu.SubTrigger>
            <ContextMenu.SubContent>
              <ContextMenu.Item>Editor</ContextMenu.Item>
              <ContextMenu.Item>Terminal</ContextMenu.Item>
            </ContextMenu.SubContent>
          </ContextMenu.Sub>
        </ContextMenu.Content>
      </ContextMenu>
      <span className="demo-ui-label">Sort: {sort} · Compact: {compact ? 'on' : 'off'}</span>
    </div>
  );
}

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled
`onOpenChange`	`(open: boolean) => void`	—	Called whenever the open state changes
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Preferred side relative to the pointer: top / bottom / left / right
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Cross-axis alignment: start / center / end
`offset`	`number`	`2`	Distance from the pointer
`ContextMenu.Trigger`	`HTMLAttributes`	—	The right-click area; asChild merges onto the only child
`ContextMenu.Content`	`HTMLAttributes`	—	The menu container, role="menu"
`ContextMenu.Item`	`ButtonHTMLAttributes`	—	A menu item, role="menuitem", closes the menu on select
`onSelect`	`(event) => void`	—	Called on select; call event.preventDefault() to keep the menu open
`ContextMenu.CheckboxItem`	`ButtonHTMLAttributes`	—	A checkable item, stays open after toggling
`ContextMenu.RadioGroup`	`HTMLAttributes`	—	A group of radio items
`ContextMenu.RadioItem`	`ButtonHTMLAttributes`	—	A radio item, stays open after selecting
`ContextMenu.Sub`	`object`	—	Submenu root
`ContextMenu.SubTrigger`	`ButtonHTMLAttributes`	—	The submenu trigger, opens on hover or arrow keys
`ContextMenu.SubContent`	`HTMLAttributes`	—	The submenu container, opens to the right by default
`ContextMenu.Group`	`HTMLAttributes`	—	A group container
`ContextMenu.Label`	`HTMLAttributes`	—	A group label
`ContextMenu.Separator`	`HTMLAttributes`	—	A divider between groups
`ContextMenu.Shortcut`	`HTMLAttributes`	—	A trailing shortcut hint