ContextMenu

16 parts

A menu that opens at the pointer on right-click (or a long-press on touch), replacing the platform's native context menu with your own styled actions. Built on top of Menu, so it inherits keyboard navigation, typeahead, nested submenus, and checkbox/radio items. Use it for contextual actions tied to a region or element — cut/copy/paste, row actions in a table, canvas tools — when there is no persistent button to click. The root owns open state and provides context to every part; listen to update:open to react when the menu opens or closes.

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue
import {
  ContextMenuArrow,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '@robonen/primitives/menus/context-menu';

<ContextMenuRoot>
  <ContextMenuArrow />
  <ContextMenuCheckboxItem />
  <ContextMenuContent />
  <ContextMenuGroup />
  <ContextMenuItem />
  <ContextMenuItemIndicator />
  <ContextMenuLabel />
  <ContextMenuPortal />
  <ContextMenuRadioGroup />
  <ContextMenuRadioItem />
  <ContextMenuSeparator />
  <ContextMenuSub />
  <ContextMenuSubContent />
  <ContextMenuSubTrigger />
  <ContextMenuTrigger />
</ContextMenuRoot>

API Reference

ContextMenuArrow

Arrow

An optional arrow that visually points from the content back toward its anchor. Render it inside the content.

No props or events — renders its element and forwards attributes.

ContextMenuCheckboxItem

CheckboxItem

An item that toggles an on/off (or indeterminate) state, exposing `aria-checked` for assistive tech. Bind `v-model:checked` and pair it with a `ContextMenuItemIndicator` to render the checkmark.

No props or events — renders its element and forwards attributes.

ContextMenuContent

Content

The floating surface that holds the menu items, positioned at the pointer where the menu was invoked. Handles focus management, typeahead, and dismissal on outside click or Escape; render it inside a portal. Cursor-anchored positioning (`side`/`align`) is fixed by this part; pass collision/sizing props as needed.

No props or events — renders its element and forwards attributes.

ContextMenuGroup

Group

Groups a set of related items under one accessible `role="group"`, optionally labelled by a `ContextMenuLabel`. Use it to organize the menu into sections.

No props or events — renders its element and forwards attributes.

ContextMenuItem

Item

A single actionable command in the menu. Emits `select` on click or Enter and closes the menu by default; can be `disabled` for unavailable actions.

No props or events — renders its element and forwards attributes.

ContextMenuItemIndicator

ItemIndicator

Renders its content only when the parent checkbox or radio item is checked. Place it inside a `ContextMenuCheckboxItem` or `ContextMenuRadioItem` to show the check or dot.

No props or events — renders its element and forwards attributes.

ContextMenuLabel

Label

A non-interactive caption for a group of items. Skipped by keyboard navigation; use it to title a section within the menu.

No props or events — renders its element and forwards attributes.

ContextMenuPortal

Portal

Teleports the menu content into `document.body` (or a custom target) so it escapes parent overflow and stacking contexts. Place it between the trigger and the content.

No props or events — renders its element and forwards attributes.

ContextMenuRadioGroup

RadioGroup

A group of mutually exclusive `ContextMenuRadioItem`s sharing a single selected value. Bind `v-model` to track the active choice.

No props or events — renders its element and forwards attributes.

ContextMenuRadioItem

RadioItem

One option within a `ContextMenuRadioGroup`, identified by its `value`. Selecting it sets the group's value; pair it with a `ContextMenuItemIndicator` to render the selected dot.

No props or events — renders its element and forwards attributes.

ContextMenuRoot

Root

A menu that opens at the pointer on right-click (or a long-press on touch), replacing the platform's native context menu with your own styled actions. Built on top of Menu, so it inherits keyboard navigation, typeahead, nested submenus, and checkbox/radio items. Use it for contextual actions tied to a region or element — cut/copy/paste, row actions in a table, canvas tools — when there is no persistent button to click. The root owns open state and provides context to every part; listen to `update:open` to react when the menu opens or closes.

PropTypeDescription
dir?Direction
modal?boolean
pressOpenDelay?numberThe duration in milliseconds from when a touch/pen press starts until the menu opens (long-press). Right-click opens immediately regardless.
open?booleanTwo-way bound value (v-model:open).
Emits
EventPayload
update:open[value: boolean]

ContextMenuSeparator

Separator

A visual divider between groups of items, exposed as `role="separator"` and skipped by keyboard navigation.

No props or events — renders its element and forwards attributes.

ContextMenuSub

Sub

Wraps a nested submenu, pairing a `ContextMenuSubTrigger` with its `ContextMenuSubContent` and owning that submenu's open state. Bind `v-model:open` to control it, or leave it unbound and pass `defaultOpen` to use it uncontrolled. Listen to `update:open` to track expansion; the default slot also exposes the current `open` value.

PropTypeDescription
defaultOpen?booleanThe open state of the submenu when initially rendered. Use when you do not need to control its open state.

ContextMenuSubContent

SubContent

The floating panel of a nested submenu, positioned alongside its `ContextMenuSubTrigger`. Render it inside a `ContextMenuSub`.

No props or events — renders its element and forwards attributes.

ContextMenuSubTrigger

SubTrigger

The item that opens a nested submenu on hover or arrow-key, anchoring its `ContextMenuSubContent`. Place it as the first child of a `ContextMenuSub`.

No props or events — renders its element and forwards attributes.

ContextMenuTrigger

Trigger

The region that captures right-click (and touch/pen long-press), preventing the native context menu and opening the menu anchored at the pointer position. Wrap whatever area should respond to a secondary click.

PropTypeDescription
disabled?boolean