Vitral 0.2
Menu

ContextMenu

The menu a right-click or the context-menu key opens, at the pointer or under the focused element, with submenus.

WAI-ARIA tested

Import

main.ts
import { ContextMenu } from '@vitral/vue';

On an element

report.pdf
Right-click it, or focus it and press Shift+F10. Last command: —
<script setup lang="ts">import { ContextMenu, type MenuItem } from '@vitral/vue';import { ref } from 'vue'; const last = ref('—');const run = ({ item }: { item: MenuItem }) => (last.value = item.label ?? '');const items: MenuItem[] = [    { label: 'Open', icon: 'folderOpen', command: run },    { label: 'Rename', icon: 'pencil', command: run },    { label: 'Share', icon: 'externalLink', items: [{ label: 'Email', command: run }, { label: 'Copy link', icon: 'copy', command: run }] },    { separator: true },    { label: 'Delete', icon: 'trash', command: run }];</script> <template>    <div        id="ctx-target"        tabindex="0"        style="padding: 2rem; text-align: center; border: 1px dashed var(--vt-content-border-color); border-radius: 8px"        aria-describedby="ctx-hint"    >        report.pdf    </div>    <small id="ctx-hint" style="color: var(--vt-text-muted-color)">Right-click it, or focus it and press Shift+F10. Last command: {{ last }}</small>    <ContextMenu :model="items" target="#ctx-target" aria-label="File actions" /></template>

API

Read from packages/vue/src/components/ContextMenu/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
modelMenuItem[]The items; an item's `items` open as a submenu beside it.
globalbooleanOpen on a right-click (or Shift+F10) anywhere in the page.
targetstring | HTMLElement | nullOpen on a right-click, Shift+F10 or the context-menu key on this element, or on the element a selector finds.
appendTostringWhere it renders: `'body'` (the default) or a selector.
ariaLabelstringNames the menu.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——

Slots

NameSlot propsDescription
item(props: NestedMenuItemSlotProps)An item's content. The menuitem element around it, with its role and keyboard, stays.