vuetify dropdown v-menu with submenu don't close on select

Question

Working with Vuetify and have problem with the submenu to a a dropdown menu. Everything works as it should, except for the main dropdown menu that does not closes when click on a submenu item. The submenu closes as it should. 1. The dropdown menu open on click 2. The submenu open on hover 3. If I click on a main menu item, the whole menu close. I want it to stay open as I don't have any router link for the main menu items, only for the submenu items. 4. If I click on a submenu item, I get routed to the new page, but the main menu does not close, only the submenu. Have to click a second time outside the dropdown box to close it.

I have tried with "close-on-click" and "close-on-content-click" without sucsess.

<v-menu offset-y :close-on-select="true">
    <v-btn flat slot="activator">
      <v-icon left>expand_more</v-icon>
      <span>Our Adventures</span>
    </v-btn>
    <v-list class="py-0">
      <v-list-tile>
        <router-link to="/adventures">
          <v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
        </router-link>
      </v-list-tile>
    </v-list>
    <v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
      <v-menu offset-x right open-on-hover>
        <v-list-tile slot="activator">
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
        <v-list dense>
          <v-list-tile
            v-for="subItem in item.items"
            :key="subItem.title"
            @click="close"
            router
            :to="subItem.link"
          >
            <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>
    </v-list>
  </v-menu>

and the related script

 items: [
    {
      title: "Nordic skating",
      items: [
        { title: "Open tour", link: "/adventures/skating/weekend" },
        { title: "Private tour", link: "/adventures/skating/private" }
      ]
    },
    {
      title: "Kayak",
      items: [
        { title: "Open tour", link: "/adventures/kayak/weekend" },
        { title: "Private tour", link: "/adventures/kayak/private" }
      ]
    },
    {
      title: "Hiking",
      items: [
        { title: "Open tour", link: "/adventures/hiking/eightdays" },
        { title: "Private tour", link: "/adventures/hiking/private" }
      ]
    },
    {
      title: "Cross country skiing",
      items: [
        { title: "Open tour", link: "/adventures/skiing/weekend" },
        { title: "Private tour", link: "/adventures/skiing/private" },
        {
          title: "Winter adventures",
          link: "/adventures/skiing/adventures"
        }
      ]
    }
  ],

Ankit Kante Ankit Kante · Accepted Answer · 2019-11-29T19:27:34

You have not mentioned Vuetify version, but I assume it's 1.x. Here's what I have done in my projects:

In top level v-menu, close-on-content-click="true". This prop is true by default, so, you don't need to add it.
The inner v-menu will have open-on-hover, which you code already has.
Moved the slot="activator" to a template.
On the activator of inner v-menu, I have added @click.stop.prevent

So, your code should look like:

<v-menu offset-y>
  <v-btn flat slot="activator">
    <v-icon left>expand_more</v-icon>
    <span>Our Adventures</span>
  </v-btn>
  <v-list class="py-0">
    <v-list-tile>
      <router-link to="/adventures">
        <v-list-tile-title class="black--text plain-text">All our adventures</v-list-tile-title>
      </router-link>
    </v-list-tile>
  </v-list>
  <v-list v-for="item in items" :key="item.title" class="text-xs-left py-0">
    <v-menu offset-x right open-on-hover>
      <template slot="activator">
        <v-list-tile 
          @click.stop.prevent
        >
          <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile>
      <template>
      <v-list dense>
        <v-list-tile
          v-for="subItem in item.items"
          :key="subItem.title"
          @click="close"
          router
          :to="subItem.link"
        >
          <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
  </v-list>
</v-menu>

Side Note: slot attribute is deprecated in Vue 2.6. Please consider using v-slot directive. https://vuejs.org/v2/guide/components-slots.html

vuetify dropdown v-menu with submenu don't close on select

3 Answers