ContextMenu

Right-click menu that opens at the cursor over its content. The size prop (xs, sm, md, lg, xl) sets the item height, padding and text.

Jump to API reference

Import

Vue

import { UiContextMenu } from '@ziyarago/ui/vue'

Right-click area

Right-click anywhere on this text to open the menu.

Vue

<UiContextMenu
  :items="[{ label: 'Open', value: 'open', icon: 'external-link' }, { label: 'Copy link', value: 'copy', icon: 'copy', shortcut: 'C' }, { separator: true }, { label: 'Remove', value: 'rm', icon: 'trash', tone: 'danger' }]"
>
  Right-click anywhere on this text to open the menu.
</UiContextMenu>

Sizes

Right-click here

Vue

<UiContextMenu
  size="xs"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
>
  Right-click here
</UiContextMenu>

<UiContextMenu
  size="sm"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
>
  Right-click here
</UiContextMenu>

<UiContextMenu
  size="md"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
>
  Right-click here
</UiContextMenu>

<UiContextMenu
  size="lg"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
>
  Right-click here
</UiContextMenu>

<UiContextMenu
  size="xl"
  :items="[{ label: 'Edit', value: 'edit', icon: 'pencil', shortcut: 'E' }, { label: 'Duplicate', value: 'dup', icon: 'copy' }, { separator: true }, { label: 'Delete', value: 'del', icon: 'trash', tone: 'danger' }]"
>
  Right-click here
</UiContextMenu>

API reference

Wraps an area and shows a menu at the cursor on right click; use for row and canvas actions.

Props

PropType and valuesDefaultDescription

items

{ label: string; value?: string; icon?: string; shortcut?: string; tone?: 'danger'; disabled?: boolean; onClick?: (item) => void; separator?: boolean }[]

'[]'Menu entries. Item fields: label, value (passed to select), icon (icon name), shortcut (kbd hint on the right), tone "danger" (red), disabled true (dimmed, not clickable), onClick (called with the item when clicked, before the select event), separator true (renders a divider; other fields ignored).

sizexssmmdlgxl'md'Scale of row height and text.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultThe area that reacts to right click.

Events

Vue: @name. React: onName.

selectCalled with the item value when an entry is clicked. The menu closes first.

Notes

The native context menu is prevented inside the area. Clicking outside, right-clicking again or pressing Escape closes it.
The menu is clamped to the viewport using a rough 42 px per row.