Preview Updated 2026-05-10

Context menu

A menu opened by right-click. Supports separators, shortcuts, and danger items, and is automatically clamped within the viewport.

Basic usage

Wrap a target region. After a right-click triggers the contextmenu event, the menu is shown at the cursor position. Esc or clicking outside closes it.

<CfContextMenu :items="items" @select="onPick">
<div>Right-click here</div>
</CfContextMenu>

<CfContextMenu items={items} onSelect={onPick}>
<div>Right-click here</div>
</CfContextMenu>

Disabled / danger / separator

disabled greys an item out, danger turns it red, and separator: true draws a divider row.

右键 → 查看完整菜单（含 disabled / danger / separator）

<CfContextMenu :items="items">…</CfContextMenu>

<CfContextMenu items={items}>…</CfContextMenu>

API

items: ContextMenuItem[]. Each entry supports:

Field	Type	Description
`label`	`string`	Text
`value`	`string`	Value emitted on select (falls back to label)
`shortcut`	`string`	Right-aligned shortcut hint
`disabled`	`boolean`
`danger`	`boolean`	Red styling
`separator`	`boolean`	Divider row (other fields ignored)