IContextMenu ​

The same menu as IDropdownMenu, opened by right-click on a region instead of by pressing a trigger.

<script setup lang="ts">
const items = [
  { label: 'Rename', icon: PencilIcon, onSelect: rename },
  { label: 'Duplicate', icon: CopyIcon, onSelect: duplicate },
  '-',
  { label: 'Delete', icon: TrashIcon, danger: true, onSelect: remove },
]
</script>

<template>
  <IContextMenu :items="items">
    <template #trigger>
      <div class="…">
        Right-click anywhere in here
      </div>
    </template>
  </IContextMenu>
</template>

Keep the actions somewhere visible too ​

A context menu is invisible until it is invoked, so put whatever is in it somewhere visible as well — a row's overflow menu, a toolbar, a details panel.

Entries ​

Entries take the same shape as IDropdownMenu: a '-' renders a separator, an entry with items opens a submenu, danger styles a destructive action, and an entry with neither items nor onSelect is a non-interactive group label.

const items: DropdownMenuEntry[] = [
  { label: 'Rename', icon: PencilIcon, onSelect: rename },
  { label: 'Share', items: [{ label: 'Copy link', onSelect: copy }] },
  '-',
  { label: 'Delete', danger: true, onSelect: remove },
]

Opening is reported, not controlled ​

There is no v-model:open — the menu appears wherever the pointer is. Listen for update:open when you need to know it opened.

<IContextMenu :items="items" @update:open="onOpenChange">…</IContextMenu>

Props ​

Events ​

Slots ​

Accessibility ​

The menu opens from the keyboard through the platform's context-menu key or Shiftf10. Arrow keys move between entries, typing jumps to a matching one, Escape closes, and focus returns to the region afterwards.