← All components Feedback & overlays

ContextMenu

Right-click + Shift+F10 menu. role=menu items, arrow-keys navigate, no animation (Rauno: native macOS feel).

Inspired by Radix ContextMenu, WAI-ARIA APG Menu, Apple HIG (disable, don't hide).

Preview

What it looks like.

Right-click anywhere on the surface, or focus it and press Shift+F10.

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { ContextMenu } from '@locara/components'

<ContextMenu
  items={[
    { id: 'rename', label: 'Rename', icon: <PencilIcon/>, shortcut: '⌘E', onSelect: rename },
    { id: 'dup', label: 'Duplicate', icon: <DuplicateIcon/>, shortcut: '⌘D', onSelect: duplicate },
    { id: 'branch', label: 'Branch from here', icon: <BranchIcon/>, onSelect: branch },
    { id: 'sep1', separator: true },
    { id: 'del', label: 'Delete', icon: <TrashIcon/>, shortcut: '⌫', destructive: true, onSelect: confirmDelete },
  ]}
>
  <button>Right-click me</button>
</ContextMenu>

Or copy the source into your repo: locara add context-menu

Design notes

Why it works this way.

Disabled items stay visible but grayed (Apple HIG). No animation on open — native macOS menus are instant, and Rauno's rule says frequent low-novelty actions shouldn't animate. Shift+F10 (or the ContextMenu key) is the keyboard alternative.