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 } from "@plexui/ui/components/ContextMenu";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
| Prop | Type | Default | Description |
|---|---|---|---|
onOpen | () => void | — | Called when the menu opens |
onClose | () => void | — | Called when the menu closes |
ContextMenu.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactElement | — | The element the menu is for; it receives the handlers |
disabled | boolean | false | The element keeps the browser's own context menu |
ContextMenu.Content
The props of Menu.Content but its placement, which follows how the menu opened: width, minWidth, maxHeight and pill.
The items are the ones of Menu, also under ContextMenu: ContextMenu.Item, ContextMenu.Link, ContextMenu.Separator, ContextMenu.Label, ContextMenu.Group, ContextMenu.Sub, ContextMenu.SubTrigger, ContextMenu.SubContent, ContextMenu.CheckboxItem, ContextMenu.RadioGroup and ContextMenu.RadioItem.
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%))