Context Menu
A menu of actions for an element: a secondary click opens it at the pointer, a touch and hold opens it beside the element over a dimmed page, as iOS 26 context menus do. Its items are the ones of Menu.
import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "@plexui/vue/components/ContextMenu";
import { MenuItem, MenuSeparator } from "@plexui/vue/components/Menu";A context menu gathers the actions for one element, such as a row, a file or a photo, without a button of its own: a secondary click (a right click or a Control click) opens it at the pointer, and on a touch screen a touch and hold opens it beside the element, as in iOS 26. Keep the actions an element already shows elsewhere too, because a context menu is easy to miss, and put the most used ones first.
Examples
Overview
Rounded elements
API
ContextMenu
Events: open when the menu opens, close when it closes.
ContextMenuTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | The element keeps the browser's own context menu |
Its default slot is the element the menu is for; it receives the handlers.
ContextMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | string | — | Defines the width of the menu |
min-width | number | string | — | Defines the min-width of the menu, in pixels |
max-height | number | — | Defines the max-height of the menu, in pixels |
pill | boolean | false | Rounder list with fully rounded rows |
Its placement follows how the menu opened. The items are the Menu ones: MenuItem, MenuLink, MenuSeparator, MenuLabel, MenuGroup, MenuSub, MenuSubTrigger, MenuSubContent, MenuCheckboxItem, MenuRadioGroup and MenuRadioItem.
The menu is a menu with menuitem rows, as Menu is. With a focused element, the Context Menu key or Shift F10 opens it under the element, and closing it returns focus to the element; a pointer or a touch leaves focus where it was. A press on the dimming closes the menu and reaches nothing under it.
Styling
ContextMenu reads these component tokens, and the menu the Menu ones. Override them at any scope to restyle it:
--context-menu-dimming-background: the dimming (defaultlight-dark(rgb(0 0 0 / 23%), rgb(0 0 0 / 50%)))--context-menu-dimming-backdrop-filter: the blur under the dimming (defaultblur(30px))--context-menu-preview-radius: the corner of an element without its own (default30px)--context-menu-preview-shadow: the shadow around the element (default0 0 32px rgb(0 0 0 / 20%))