Basel Standard / Docs

Context Menu

Local action surface for object-specific commands revealed by right-click or long press.

Right-click this planning region

Context menus expose actions that belong to a specific object under the cursor. They are useful when moving those actions into a toolbar would add noise or break spatial focus. In this system the menu stays compact and structural so the selected object remains the main point of attention.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem inset>Duplicate region</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Why This Primitive Exists

Some actions only make sense once an object is selected. A context menu keeps those actions attached to the object instead of scattering them into global navigation.

Use it for canvas selections, table rows, annotations, and editor objects.
Prefer it when the trigger is spatially implied by the surface itself.
Avoid it when the action must stay visible for discoverability or accessibility reasons.

Examples

Basic Object Actions

The simplest pattern is a trigger region with a short list of object-specific actions.

Right-click this planning region

<ContextMenu>
  <ContextMenuTrigger className="border border-dashed p-6">
    Right-click this planning region
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>Selection actions</ContextMenuLabel>
    <ContextMenuItem inset>Duplicate annotation</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Toggles, Density, And Submenus

Checkbox items, radio groups, and submenus work well for local view controls and mode switches.

Context menu with toggles and density

<ContextMenuSub>
  <ContextMenuSubTrigger>Density mode</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuRadioGroup value="balanced">
      <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuSubContent>
</ContextMenuSub>

In Context

The menu becomes more credible when it is attached to a real object in a real workflow rather than an isolated box.

Canvas review

Context menus should stay attached to the object under review.

Use them for local actions where moving to a toolbar would break concentration.

Right-click selected annotation

<Card>
  <CardContent>
    <ContextMenu>{/* local annotation actions */}</ContextMenu>
  </CardContent>
</Card>

Guidance

Keep Actions Strictly Local

Show only actions that affect the selected object or region.
Move global actions into a toolbar, dropdown menu, or page header.
If users need the action frequently, make it visible somewhere else as well.

Design For Recognition

Write labels that describe the outcome directly.
Use submenus sparingly and only when they keep the first level shorter.
Keep destructive actions clearly named and visually separated when possible.

Respect Discoverability Limits

Right-click and long-press are secondary affordances, not the only path.
If the task matters for all users, provide a visible alternative.
Use context menus to reduce clutter, not to hide important workflow steps.

API Reference

Core Exports

Export	Renders	Notes
`ContextMenu`	`ContextMenuPrimitive.Root`	Root state container.
`ContextMenuTrigger`	`ContextMenuPrimitive.Trigger`	The region that receives right-click or long-press.
`ContextMenuContent`	`ContextMenuPrimitive.Content`	Portal-based menu surface.
`ContextMenuItem`	`ContextMenuPrimitive.Item`	Standard action row with optional `inset`.
`ContextMenuCheckboxItem`	`ContextMenuPrimitive.CheckboxItem`	Checkbox-style item with built-in indicator.
`ContextMenuRadioItem`	`ContextMenuPrimitive.RadioItem`	Radio-style item for mutually exclusive choices.
`ContextMenuLabel`	`ContextMenuPrimitive.Label`	Section label for grouped commands.
`ContextMenuSeparator`	`ContextMenuPrimitive.Separator`	Divider between sections.
`ContextMenuShortcut`	`span`	Trailing shortcut hint.
`ContextMenuSub`, `ContextMenuSubTrigger`, `ContextMenuSubContent`	Radix submenu parts	Nested local actions.
`ContextMenuRadioGroup`	`ContextMenuPrimitive.RadioGroup`	Shared selection state for radio items.

Notable Props

Export	Prop	Type	Notes
`ContextMenuItem`	`inset`	`boolean`	Adds extra left padding for aligned nested rows.
`ContextMenuLabel`	`inset`	`boolean`	Aligns labels with inset items.
`ContextMenuContent`	standard Radix content props	Radix content props	Includes alignment and collision handling from Radix.
`ContextMenuCheckboxItem`	`checked`, `onCheckedChange`	Radix checkbox item props	For local boolean settings.
`ContextMenuRadioGroup`	`value`, `onValueChange`	Radix radio group props	For mutually exclusive local modes.

The component is a styled wrapper around Radix Context Menu, so the underlying keyboard behavior and accessibility semantics remain intact.

Previous: Command Next: Dialog