Context Menu
A menu of actions opened by right-click or long-press on a target.
@garn/ui/context-menuDefault
A right-click target with browser-style actions.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add context-menu- Registry
context-menu- Source
- context-menu.tsx
- Deps
@radix-ui/react-context-menulucide-react- Registry deps
utils
Import
import { ContextMenu } from "@garn/ui/context-menu";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="context-menu-content"]| Property | Token | Tier |
|---|---|---|
itemMinHeight | --garn-control-h-md | semantic · air |
Overview
ContextMenu offers actions contextual to an element via right-click / long-press — canvas objects, file or list rows, rich editors. ContextMenuTrigger wraps the target area, ContextMenuContent opens at the pointer, and it carries the same item vocabulary as DropdownMenu (items, checkbox/radio items, labels, separators, submenus). It's discovered by gesture, so it complements a visible affordance — for a button-triggered menu use DropdownMenu.
Guidelines
Never make a context menu the only way to do something. Right-click/long-press is hard to discover and unavailable to many users — always provide a visible path (a kebab DropdownMenu, inline buttons) to the same actions. Use it to speed up expert workflows.
Scope items to the target and keep the list short. The menu should act on the element you opened it over; show only relevant actions, group them with separators, and keep destructive items distinct. Deep submenus get unwieldy — go one level where possible.
Support touch and keyboard. Long-press opens it on touch and it's fully arrow-key navigable once open; don't trap focus or rely on hover. Selecting an item closes the menu, so use checkbox/radio items for things that should persist it.
Best practices
- Mirror the same actions on a visible control — right-click alone isn't discoverable or fully accessible.
- Group and separate destructive items; control checkbox/radio item state.
- Give the trigger area real, meaningful content.
- Don't make right-click the only way to reach an action.
- Don't use it where users expect a button-triggered menu (dropdown-menu).
- Don't nest deep submenu trees.
Content guidelines
- Phrase items as actions, verb-first, and keep them short.
- Mirror the labels of any equivalent button menu so the two stay consistent.
Accessibility
- Role
menu- ARIA APG
- menu
- Focus
- Roving focus across items; focus returns to the trigger area on close.
Keyboard
| Shift+F10ContextMenu | Open the menu from the focused trigger (keyboard). |
| ArrowUpArrowDown | Move between items. |
| ArrowRightArrowLeft | Open / close a submenu. |
| EnterSpace | Activate the highlighted item. |
| Escape | Close the menu. |
- • Content is role=menu with roving focus; items are menuitem / menuitemcheckbox / menuitemradio.
- • Right-click / long-press is the primary opener — also expose the actions from a visible control for discoverability and accessibility.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.