docs: add positioning section and example for menus (#21988)

fixes: #19936

Author: antonhansson0624

packages/docs/src/examples/v-menu/prop-positioningmenu.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-container max-width="300">
+    <div
+      v-for="n in 10"
+      :key="n"
+      class="py-2 border-b d-flex align-center ga-2"
+    >
+      Some Text Here
+      <v-spacer></v-spacer>
+      <v-icon-btn
+        icon="mdi-dots-vertical"
+        size="small"
+        variant="outlined"
+        @click="show"
+      ></v-icon-btn>
+    </div>
+
+    <v-menu
+      v-model="showMenu"
+      :offset="[-8,-12]"
+      :target="menuTarget"
+      location="bottom end"
+      scroll-strategy="close"
+    >
+      <v-list
+        :items="menuItems"
+        class="py-0"
+        density="compact"
+        item-value="code"
+        item-props
+        slim
+      >
+        <template v-slot:prepend>
+          <v-icon class="mr-n2" size="small"></v-icon>
+        </template>
+      </v-list>
+    </v-menu>
+  </v-container>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const showMenu = ref(false)
+  const menuTarget = ref(null)
+
+  const menuItems = [
+    { title: 'Create', prependIcon: 'mdi-plus-circle-outline', code: 'add' },
+    { type: 'divider' },
+    { title: 'Modify', prependIcon: 'mdi-pencil-outline', code: 'edit' },
+    { type: 'divider' },
+    { title: 'Remove', prependIcon: 'mdi-trash-can-outline', code: 'delete' },
+  ]
+
+  async function show(evt) {
+    if (showMenu.value) {
+      showMenu.value = false
+      await new Promise(r => setTimeout(r, 100))
+    }
+    menuTarget.value = evt.target.closest('.v-icon-btn')
+    showMenu.value = true
+  }
+</script>

packages/docs/src/pages/en/components/menus.md

@@ -97,6 +97,17 @@ Menus with other menus inside them will not close until their children are close
 
 <ExamplesExample file="v-menu/prop-submenu" />
 
+#### Positioning Menus with Coordinates
+
+`v-menu` can be positioned relative to a DOM element or explicit `[x, y]` coordinates.
+
+* The most common use case is to pass an **event target element**. This allows the menu to anchor itself to the element that was clicked.
+* You can also use `[x, y]` screen coordinates, though this is less common and typically used for context menus.
+* `:offset` is used to shift the menu position relative to its anchor, not to define an absolute position.
+* Any DOM event with `clientX` and `clientY` can be used (e.g. `click`, `contextmenu`).
+
+<ExamplesExample file="v-menu/prop-positioningmenu" />
+
 ### Slots
 
 #### Activator and tooltip