Context Menu

ContextMenu uses the same item model as Menu, but opens from a contextmenu event and positions the panel at the pointer. Use it for file lists, canvases, editors, tables, and other surfaces where secondary actions belong near the clicked target.

Anatomy

• #default: The surface that receives the right-click gesture.
• #[item.slot]: Per-item render override when an item has a slot key.
• #checkbox-item: Shared override for checkbox menu items.
• #radio-item: Shared override for radio menu items.
• #label: Shared override for label rows.

The menu panel, groups, items, separators, checkbox/radio roles, and submenu panels are generated from items.

Usage

<script setup lang="ts">
import { ContextMenu } from "akaza-ui";

const items = [
  { label: "Open" },
  { label: "Rename" },
  { type: "separator" },
  { label: "Delete", disabled: true },
];
</script>

<template>
  <ContextMenu :items="items">
    <div>Right-click this area</div>
  </ContextMenu>
</template>

Examples

Checkbox and radio items

Context menus support the same checkbox and radio item shape as Menu. Checkbox items stay open by default because closeOnSelect only applies to normal action items.

<script setup lang="ts">
import { computed, ref } from "vue";

const showGrid = ref(true);
const radioValues = ref({ sort: "name" });

const items = computed(() => [
  { type: "checkbox", label: "Show grid", checked: showGrid.value, onUpdateChecked: (value) => (showGrid.value = value) },
  { type: "radio", label: "Name", value: "name", radioGroup: "sort" },
  { type: "radio", label: "Date", value: "date", radioGroup: "sort" },
]);
</script>

<template>
  <ContextMenu v-model:radio-values="radioValues" :items="items">
    <div>Right-click</div>
  </ContextMenu>
</template>

Programmatic open

Use the exposed openAt(x, y) method when the menu should open from a custom gesture.

<script setup lang="ts">
import { ref } from "vue";
import { ContextMenu } from "akaza-ui";

const menu = ref<InstanceType<typeof ContextMenu>>();
</script>

<template>
  <ContextMenu ref="menu" :items="items">
    <button @click="menu?.openAt(120, 160, 'custom')">Open at point</button>
  </ContextMenu>
</template>

API Reference

Props

Emits

Slots

Exposed Methods

UI Options

ContextMenuUi extends MenuUi.

Styling Hooks

The generated root uses display: contents, so it does not change trigger-surface layout. Use ui.content for the visible popup; override ui.root display only when a real wrapper box is intentional.

Popup entry and exit use a subtle side-aware structural transition. Override --akaza-context-menu-duration to change its 120ms duration. Reduced-motion preference shortens it automatically.

Keyboard

Touch and pen users can open the menu with a long press. Moving more than 10px before delay cancels it.