Context Menu

StableBase UI

Live preview

Right-click here

Installation

pnpm dlx shadcn@latest add @sc1m/context-menu

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuCheckboxItemIndicator,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRadioItemIndicator,
  ContextMenuSeparator,
  ContextMenuGroup,
  ContextMenuGroupLabel,
  ContextMenuSubmenuRoot,
  ContextMenuSubmenuTrigger,
} from "@/components/ui/context-menu";

Composition

Every part is a separate export. ContextMenu owns state; the rest are presentational and must appear in this order.

ContextMenu├── ContextMenuTrigger└── ContextMenuContent    ├── ContextMenuItem    └── ContextMenuSeparator

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

Right-click here

<ContextMenu>
  <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-lg border border-dashed border-line text-sm text-fg-muted">
    Right-click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Forward</ContextMenuItem>
    <ContextMenuItem>Reload</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Inspect</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

ContextMenu

PropTypeDefaultDescription

onOpenChange((open: boolean, eventDetails: ContextMenuRoot.ChangeEventDetails) => void)—Event handler called when the menu is opened or closed.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Context Menu — see its reference for the full keyboard map.

Decorative glyphs are aria-hidden, so they are not announced.
Disabled parts mute their contents rather than the element, keeping the focus ring at full strength where the part stays focusable.

Design tokens

The component reads semantic tokens only — no raw colour, radius, or duration appears in its source. Override the token, not the component.

TokenApplied to

--brand-radius-lgContextMenuContent

--brand-radius-smContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuSubmenuTrigger

--fgContextMenuContent, ContextMenuRadioItemIndicator

--fg-subtleContextMenuGroupLabel, ContextMenuSubmenuTrigger

--lineContextMenuContent, ContextMenuSeparator

--shadow-overlayContextMenuContent

--surfaceContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuSubmenuTrigger

--surface-raisedContextMenuContent

Source

src/components/ui/context-menu/context-menu.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

Context Menu

On this page