Context Menu

Preview

Design guidance

Selected options use a trailing checkmark. Their resting background stays transparent; hover and keyboard focus provide the row highlight.

Use a context menu for commands tied to the area under the pointer. Keep equivalent visible actions available for touch and for users who do not discover right-click. The target is caller content; give it a useful accessible name when its purpose is not clear from surrounding text.

Installation

npx shadcn@latest add https://ghost-ui.com/r/context-menu.json

Basic usage

This composition keeps the required positioning layer and names the action menu for assistive technology. On touch devices, Base UI also supports the native context gesture.

123456789101112import { ContextMenu } from "@/components/ui/context-menu";

<ContextMenu.Root>
<ContextMenu.Trigger aria-label="Page actions">Right click anywhere in this area</ContextMenu.Trigger>
<ContextMenu.Portal>
  <ContextMenu.Positioner>
    <ContextMenu.Popup aria-label="Page actions">
      <ContextMenu.Item>Rename</ContextMenu.Item>
    </ContextMenu.Popup>
  </ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Root>

Structures

Root owns pointer and open state. Trigger is caller-owned content. Portal and Positioner place the popup at the pointer. Popup contains actions, optional groups and separators, and nested submenu roots. Checkbox and radio items retain their respective state semantics and use trailing check indicators.

Examples

Each configuration has its own target and menu. Equivalent visible actions appear in the final example.

Basic

Use a short action list for the common task. The preview supports copying, downloading and native navigation.

Groups and native links

Group related commands and pass Link to LinkItem through its render prop for native navigation. Use variant="plain", icon={false} and underline="none" to inherit menu styling. Wrap the label in a span and mark the trailing icon with data-menu-trailing, as shown in Link's context menu example. The menu aligns and styles the icon. The preview links to the component library.

Submenu

Use a single submenu for a real local destination choice. The chosen destination remains checked when you reopen the submenu.

Icons and shortcut labels

Icons and shortcut labels help scan commands. Labels do not register keyboard shortcuts.

Checkbox preferences

Use a checkbox item for an independent preference. The preview controls its checked state.

Exclusive choices

Use RadioGroup when one value must be selected. Each row shows a trailing check when selected.

Destructive and disabled

Keep unavailable actions disabled and mark destructive actions with data-variant="destructive". Delete changes the available command to Restore.

Long labels

Long action names wrap within the available popup width; test meaningful content near viewport edges.

Fallback trigger

The Actions button opens the same actions without a right-click gesture.

API reference

Side submenus align the checked child row with their parent trigger, or the first enabled item when none is checked. Positioner.alignOffset overrides this default. Base UI can shift the panel to keep it inside the viewport.

All public parts and props follow the installed Base UI Context Menu API. Styling-layer parts also compose the canonical DropdownMenu visual parts. Popup preserves the data-selection-overlay="context-menu" marker used by selection overlays.

See the Base UI Context Menu API for inherited props and event details.