Context Menu

Right-click menu. Free, MIT · Navigation and layout › Menus and commands

Installation

npx valyro-cli@latest add context-menu

npx shadcn@latest add https://valyro.xyz/r/context-menu.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ContextMenu } from 'valyro-ui';

Props

Prop	Type	Default
`children` *	`ReactNode`		The target area. Right-click, long-press, Shift+F10 or the ContextMenu key inside it opens the menu. Or, without `items`, the compound form: a `ContextMenu.Trigger` around the area and the rows (`ContextMenu.Item`, `.CheckboxItem`, `.Label`, `.Separator`).
`items`	`MenuItem[]`		Menu rows: actions (with optional submenus), checkboxes, radio groups, separators and labels.
`open`	`boolean`		Controlled open state. A menu opened through this prop (not by the user) appears at `anchorPoint` of the target (its centre by default).
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`disabled`	`boolean`	`false`	Ignore the opening gestures and keys, so the browser's native context menu appears instead.
`animation`	`'pop' \| 'spring'`		`pop` (default): the theme's enter. `spring`: the menu and its submenus spring open and one highlight glides between rows.
`className`	`string`		Class for the menu surface.
`anchorPoint`	`{ x: number; y: number }`	`CENTRE`	Where a menu opened through `open` / `defaultOpen` appears, as fractions of the target's box: `{ x: 0, y: 1 }` is its bottom-left corner. Default: the centre. User gestures open at the pointer.

Compound parts

ContextMenu.Trigger (ContextMenuTrigger), ContextMenu.Item (ContextMenuItem), ContextMenu.CheckboxItem (ContextMenuCheckboxItem), ContextMenu.Label (ContextMenuLabel), ContextMenu.Separator (ContextMenuSeparator)

Related components

Dropdown Menu — Dropdown menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress

Previous: Dropdown Menu · Next: Command Palette · All Navigation and layout