ui/docs/content/5.overlays/5.context-menu.md

---
github: true
---

## Usage

::component-example
#default
:context-menu-example
#code
```vue
<script setup>
const { x, y } = useMouse()

const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })

function openContextMenu () {
  const top = unref(y)
  const left = unref(x)

  virtualElement.value.getBoundingClientRect = () => ({
    width: 0,
    height: 0,
    top,
    left
  })

  isOpen.value = true
}
</script>

<template>
  <div @contextmenu.prevent="openContextMenu">
    <UContextMenu v-model="isOpen" :virtual-element="virtualElement" width-class="w-48">
      <!-- Content -->
    </UContextMenu>
  </div>
</template>
```
::

## Props

:component-props

## Preset

:component-preset