How to attach a Vuetify v-menu to its parent element in a scrollable list?

Question

In my project, I have a scrollable list of items, and each item has a menu that is opened when its activator button is hovered.

By default, v-menu elements are attached to the v-app element, which serves as a mounting point for many Vuetify elements. When I use this default behavior, the generated HTML contains many detached div elements for the popup menu, one per item in the list, in the generated v-app div:

<div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>

This is impacting the reading of the rendered DOM, and the result is a bit messy especially when debugging.

Also, once the menu is opened, and the list is scrolled, the menu remains at a fixed position and therefore gets visually detached from its activator button.

How could I attach the menu to each item of the list in order to have a more readable rendered DOM (see below)?

<my-list>
  <my-item>
    <div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>
  </my-item>
</my-list>

And how can I have the v-menu stick to its activator button when the list is scrolled?

Carruthers

Answer 1

Check out the documentation under the following link and search for "attach":

https://vuetifyjs.com/en/components/menus

"Attach": Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

So when you have a menu like e.g. this:

<v-menu>

  <v-btn slot="activator">
  Click
  </v-btn>

  <v-card>
  Content
  </v-card>

</v-menu>

You can attach it to an element, let's say the button itself, like so:

<v-menu attach="#fooAnchor">

  <v-btn slot="activator" id="fooAnchor">
    Click
  </v-btn>

  <v-card>
    Content
  </v-card>

</v-menu>

And of course you can place id="fooAnchor" wherever you want.

Deplorable

It does not says that anymore :( – Algia

Answer 2

This is the latest solution you can try this one below

<v-menu
  offset-x
  bottom
  right
  attach="zoom-feature"
>
<template v-slot:activator="{ on, attrs }">
   <v-btn
      id="zoom-feature"
      v-bind="attrs"
      v-on="on"
   >
      Click Me
   </v-btn>
 </template>
 <v-card>
   I am Card
 </v-card>
</v-menu>

Eucalyptol

Answer 3

For Vuetify 3 users:

You can fix this by setting scroll-strategy prop to "none":

<v-menu v-model="menu" scroll-strategy="none">
    <template #activator="{ props: activatorProps }">
      ...
    </template>
    ...
 </v-menu>

As stated in Vuetify's v-menu API documentation the default is set to "reposition" which causes this fixed-position effect.

Falls

you literally saved my life – Embryotomy