Context Menu

Accessible, unstyled ContextMenu: opens a menu at the pointer on contextmenu, at the focused element on Shift+F10 or the ContextMenu key, and at the touch point after a long press. Items and submenus are the shared Menu parts re-exported under ContextMenu names.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { ContextMenu, ContextMenuRoot, ContextMenuTrigger } from "@vizejs/ui/context-menu";

Or copy the source into your project with vize lib pull context-menu (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Right-click (or Shift+F10) menu for a file row with actions and a sort radio group. -->
<script setup lang="ts">
import { ref } from "vue";

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from "@vizejs/ui/context-menu";

const lastAction = ref("none");
const sortBy = ref<string | null>("name");
</script>

<template>
  <div>
    <ContextMenu>
      <ContextMenuTrigger>report-2026.pdf</ContextMenuTrigger>
      <ContextMenuContent aria-label="File actions">
        <ContextMenuItem @select="() => (lastAction = 'Open')">Open</ContextMenuItem>
        <ContextMenuItem @select="() => (lastAction = 'Rename')">Rename</ContextMenuItem>
        <ContextMenuItem disabled>Share</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuLabel>Sort by</ContextMenuLabel>
        <ContextMenuRadioGroup v-model="sortBy">
          <ContextMenuRadioItem value="name">
            <ContextMenuItemIndicator>•</ContextMenuItemIndicator>
            Name
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="modified">
            <ContextMenuItemIndicator>•</ContextMenuItemIndicator>
            Date modified
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
    <output>Last action: {{ lastAction }}; sorted by {{ sortBy }}</output>
  </div>
</template>

API

ContextMenu

Source: src/families/menus/context-menu/context-menu-root.vue

Props

Events

Slots

ContextMenuRoot

Source: src/families/menus/context-menu/context-menu-root.vue

Props

Events

Slots

Exposed

ContextMenuTrigger

Source: src/families/menus/context-menu/context-menu-trigger.vue

Props

Events

Slots

Exposed

Behavior

@vizejs/ui/context-menu opens the shared menu core (see ../menu/menu.behavior.md) anchored at a viewport point. context-menu-root.vue owns a virtual anchor and restores focus to whatever held it before the request; context-menu-trigger.vue is a non-interactive region that translates contextmenu, Shift+F10, the ContextMenu key, and touch long-press into requests. Every row is proven by the named test in context-menu.test.ts or context-menu-ssr.test.ts.