overlays

ContextMenu

Display a menu that appears on right click.

Usage

Right click here
<script setup>
const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
  const top = unref(y) - unref(windowY)
  const left = unref(x)
  virtualElement.value.getBoundingClientRect = () => ({
    width: 0,
    height: 0,
    top,
    left
  })
  isOpen.value = true
}
</script>
<template>
  <div @contextmenu.prevent="onContextMenu">
    <UContextMenu v-model="isOpen" :virtual-element="virtualElement">
      <!-- Content -->
    </UContextMenu>
  </div>
</template>

Props

virtualElementrequired
Record<string, any>

ui
any

{}

popper
{}

{}

modelValue
boolean

false

Preset

appConfig.ui.contextMenu
{
  "wrapper": "relative",
  "container": "z-20",
  "width": "",
  "background": "bg-white dark:bg-gray-900",
  "shadow": "shadow-lg",
  "rounded": "rounded-md",
  "ring": "ring-1 ring-gray-200 dark:ring-gray-800",
  "base": "overflow-hidden focus:outline-none",
  "transition": {
    "enterActiveClass": "transition ease-out duration-200",
    "enterFromClass": "opacity-0 translate-y-1",
    "enterToClass": "opacity-100 translate-y-0",
    "leaveActiveClass": "transition ease-in duration-150",
    "leaveFromClass": "opacity-100 translate-y-0",
    "leaveToClass": "opacity-0 translate-y-1"
  },
  "popper": {
    "placement": "bottom-start",
    "scroll": false
  }
}