ComponentsOverlays & feedback

Context Menu

A right-click (or long-press) menu for files, kanban cards, chart nodes and table rows. Same parts and the same MenuEntry[] data as Dropdown Menu, so one model can drive both.

Radix Context Menu components/context-menu.tsx, lib/menu.tsx, lib/variants.tstheme · material · accent · density · font

Right-click here (or long-press)

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { ContextMenu } from "@vamos-ui/react";

<ContextMenu items={fileActions}>
  <FileTile file={file} />
</ContextMenu>

Right-click can't be the only way in. Give every action a keyboard and touch path too — usually the row's ActionMenu with the same entries.

Opens with right-click, Shift+F10 or the Menu key on the focused trigger, and long-press on touch.

Keyboard inside the menu works like Dropdown Menu: arrows, Home/End, typeahead, → for submenus, Escape to close.

T-318Collect signed offer letter from new baristaMira CastellNov 12
T-319Book onboarding session for the Kadıköy teamDaniel OkaforNov 14
T-320Order uniforms (sizes S–XL)UnassignedNov 20

API

ContextMenu

Prop	Type	Default
`items` Data-driven mode: children become the right-click area. Without items, ContextMenu is the compound root.	`MenuEntry[]`	`—`
`children` With items: a single element (rendered with asChild). Without: ContextMenuTrigger + ContextMenuContent.	`ReactNode`	`—`
`disabled` Let the native browser menu through.	`boolean`	`false`
`size` Content size in data-driven mode.	`"sm" \| "md"`	`"md"`
`contentProps` Extra props for the content in data-driven mode.	`ContextMenuContentProps`	`—`
`onOpenChange` Called when it opens or closes (select the row/tile here).	`(open: boolean) => void`	`—`
`modal` Block outside interaction while open.	`boolean`	`true`

ContextMenuTrigger

Prop	Type	Default
`asChild` Merge onto your own element.	`boolean`	`false`
`disabled` Native menu instead.	`boolean`	`false`

ContextMenuContent

Prop	Type	Default
`size` Min width 180 / 220 px.	`"sm" \| "md"`	`"md"`
`loop` Arrow keys wrap around.	`boolean`	`false`
`collisionPadding` Distance kept from the viewport edge.	`number`	`12`

Items

Prop	Type	Default
`ContextMenuItem` Same API as DropdownMenuItem.	`icon · description · shortcut · badge · tone · inset · onSelect · asChild`	`—`
`ContextMenuCheckboxItem` menuitemcheckbox.	`checked · onCheckedChange · shortcut`	`—`
`ContextMenuRadioGroup / ContextMenuRadioItem` menuitemradio.	`value · onValueChange / value`	`—`
`ContextMenuSub / SubTrigger / SubContent` Submenus; one layer deeper.	`icon · size`	`—`
`ContextMenuLabel / Separator / Group` Structure.	`inset`	`—`
`ContextMenuEntries` Render MenuEntry[] inside your own ContextMenuContent.	`{ items: MenuEntry[] }`	`—`

Contact form

CTA