ContextMenu

Right-click and controlled floating menu built on Floating UI. It supports uncontrolled context-menu triggers and controlled coordinates through v-model, x, and y.

Basic Usage

ContextMenu

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const controlledOpen = ref(false)
const x = ref(0)
const y = ref(0)

function openAtCenter() {
  x.value = Math.round(window.innerWidth * 0.5)
  y.value = Math.round(window.innerHeight * 0.38)
  controlledOpen.value = true
}
</script>

<template>
  <div style="display: grid; gap: 12px; width: 520px;">
    <div style="display: flex; gap: 8px; align-items: center;">
      <TxButton type="primary" @click="openAtCenter">
        Open controlled menu
      </TxButton>
      <TxButton @click="controlledOpen = false">
        Close
      </TxButton>
    </div>

    <TxContextMenu
      v-model="controlledOpen"
      :x="x"
      :y="y"
      @open="() => {}"
    >
      <template #menu>
        <TxContextMenuItem @select="() => {}">
          Copy
        </TxContextMenuItem>
        <TxContextMenuItem @select="() => {}">
          Paste
        </TxContextMenuItem>
        <TxContextMenuItem danger @select="() => {}">
          Delete
        </TxContextMenuItem>
      </template>
    </TxContextMenu>

    <TxContextMenu>
      <template #trigger>
        <div
          style="
            width: 100%;
            padding: 24px;
            border: 1px dashed var(--tx-border-color);
            border-radius: 12px;
            user-select: none;
          "
        >
          Right click here (uncontrolled)
        </div>
      </template>

      <template #menu>
        <TxContextMenuItem @select="() => {}">
          Refresh
        </TxContextMenuItem>
        <TxContextMenuItem @select="() => {}">
          Rename
        </TxContextMenuItem>
        <TxContextMenuItem danger @select="() => {}">
          Delete
        </TxContextMenuItem>
      </template>
    </TxContextMenu>
  </div>
</template>

API

TxContextMenu Props

Prop	Type	Default	Description
`modelValue`	`boolean \| undefined`	`undefined`	Controlled open state; leave undefined for internal uncontrolled state.
`x`	`number`	`0`	Controlled menu anchor X coordinate.
`y`	`number`	`0`	Controlled menu anchor Y coordinate.
`width`	`number`	`220`	Menu panel width in pixels.
`closeOnEsc`	`boolean`	`true`	Closes the menu when Escape is pressed.
`closeOnClickOutside`	`boolean`	`true`	Closes the menu on pointer events outside the trigger and menu.

TxContextMenu Events

Event	Params	Description
`open`	`{ x: number; y: number }`	Emitted when the menu opens with the active anchor coordinates.
`close`	-	Emitted when the menu closes.

TxContextMenuItem Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables selection and item clickability.
`danger`	`boolean`	`false`	Applies danger styling to the item label.

TxContextMenuItem Events

Event	Params	Description
`select`	-	Emitted when an enabled item is selected; the parent context menu then closes.