Vuetify: [Feature Request] Nested menus

[nekosaur]

What will it allow you to do that you can't do today?

Create nested menus according to MD spec

How will it make current work-arounds straightforward?

A current solution can be found here https://codepen.io/anon/pen/LzxZzR?editors=1000

It is pretty close to MD spec but needs work.

What potential bugs and edge cases does it help to avoid?

Make sure the experience when creating nested menus is as straight forward and painless as possible.

Reference https://material.io/guidelines/components/menus.html#menus-menu-items

https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows

[Webifi]

Other than the needed css changes to reduce spacing, etc. what else is missing from vMenu?

Missing features I can think of:

• Keep parent hover menu(s) active when switching to child hover menu
• Deactivate parent menu(s) when selecting leaf from child menu

[johnleider]

Due to time constraints, moving this to a later release.

[guyver-dash]

It becomes a problem in hovering the multi-level menu. In my case, the 3rd level menu... Thanks to @Webifi for pointing it out..

Missing features I can think of:

Keep parent hover menu(s) active when switching to child hover menu
Deactivate parent menu(s) when selecting leaf from child menu

Code sample:

<v-menu offset-x>
        <v-btn primary dark slot="activator">Dropdown</v-btn>
        <v-list dense>
          <v-list-tile v-for="i in 4" :key="i" @click="">
            <v-list-tile-title>{{ i }}</v-list-tile-title>
          </v-list-tile>

          <v-menu offset-x left open-on-hover>
            <v-list-tile slot="activator" @click=""> 
              <v-list-tile-title>Open submenu</v-list-tile-title>
              <v-list-tile-action class="justify-end">
                <v-icon>play_arrow</v-icon>
              </v-list-tile-action>
            </v-list-tile>
            <v-list dense>
              <v-menu offset-x left open-on-hover>
                <v-list-tile slot="activator" @click=""> 
                  <v-list-tile-title>Open submenu</v-list-tile-title>
                  <v-list-tile-action class="justify-end">
                    <v-icon>play_arrow</v-icon>
                  </v-list-tile-action>
                </v-list-tile>
                <v-list dense>
                  <v-list-tile v-for="i in 5" :key="i" @click="">
                    <v-list-tile-title>{{ i }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
            </v-list>
          </v-menu>

          <v-list-tile v-for="i in 5" :key="i" @click="">
            <v-list-tile-title>{{ i + 5 }}</v-list-tile-title>
          </v-list-tile>
        </v-list>
      </v-menu>

[pranay22]

Two submenu one after another breaks CSS.
Example: https://codepen.io/pranay22/pen/XygPNq
Output:

[jacekkarczmarczyk]

You need to add full-width prop to v-menu https://codepen.io/anon/pen/mQwGzP

[ihteshamqazi]

Is this feature available now? The nested menu does not work on hover.

[codewp]

The nested menu does not hide on page change in mobile devices but in desktop, it works properly.

And this is my menu code. It has a submenu

<v-menu offset-y top v-show="isCalculatorPage()">
          <v-btn dark slot="activator" value="calculator_add" class="kn-bottom-nav-btn">
            <span>Add</span>
            <v-icon>add</v-icon>
          </v-btn>
          <v-list>
            <v-list-tile @click="$emit('showQuickNumber')">
              <v-list-tile-title>Quick Number</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$emit('showQuery')">
              <v-list-tile-title>Query</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$router.push('/modellist/calculator/')">
              <v-list-tile-title>From Model</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$router.push('/collectionlist/calculator/')">
              <v-list-tile-title>From Collection</v-list-tile-title>
            </v-list-tile>
            <v-list-tile @click="$emit('showTotalResultFormula')">
              <v-list-tile-title>Total Result</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-menu>
        <v-btn dark @click="$store.commit('canvas/setEditMode', true)" v-show="showCalcEditButton" value="calculator_edit" class="kn-bottom-nav-btn">
          <span>Edit</span>
          <v-icon>edit</v-icon>
        </v-btn>
        <v-btn dark @click="$store.commit('canvas/setEditMode', false)" v-show="showCalcExitEditButton" value="calculator_exit_edit" class="kn-bottom-nav-btn">
          <span>Exit</span>
          <v-icon>clear</v-icon>
        </v-btn>
        <v-btn dark @click="$router.push('/calculator')" value="calculator" class="kn-bottom-nav-btn" v-show="showCalculator">
          <span>Calculator</span>
          <v-badge>
            <span slot="badge">{{numberOfKeynumbers}}</span>
            <v-icon>iso</v-icon>
          </v-badge>
        </v-btn>
        <history-menu v-if="showHistory"/>
        <v-menu offset-y top v-show="! isCalculatorPage()" v-model="openMenu">
          <v-btn dark slot="activator" value="settings" class="kn-bottom-nav-btn">
            <span>Settings</span>
            <v-icon>build</v-icon>
          </v-btn>
          <v-list>
            <v-list-tile @click="$router.push('/preferences')">
              <v-list-tile-title>Preferences</v-list-tile-title>
            </v-list-tile>
            <v-list-tile v-if="currentUserCan('read_dimsets')" @click="$router.push('/dimsets')">
              <v-list-tile-title>Dimension Sets</v-list-tile-title>
            </v-list-tile>
            <v-list-tile v-if="currentUserCan('import_data')" @click="$router.push('/import')">
              <v-list-tile-title>Import Data</v-list-tile-title>
            </v-list-tile>
            <v-list-tile v-if="currentUserCan('manage_groups')" @click="$router.push('/groups/requests')">
              <v-list-tile-title>Groups Requests</v-list-tile-title>
            </v-list-tile>
            <v-menu v-if="showManagement" offset-x open-on-hover style="display: block;">
              <v-list-tile slot="activator">
                <v-list-tile-title>Manage</v-list-tile-title>
                <v-list-tile-action class="justify-end">
                  <v-icon>chevron_right</v-icon>
                </v-list-tile-action>
              </v-list-tile>
              <v-list>
                <v-list-tile v-if="currentUserCan('manage_groups')" @click="open('/group-management')">
                  <v-list-tile-title>Groups</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_models')" @click="open('/management')">
                  <v-list-tile-title>Models</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_collections')" @click="open('/collection-management')">
                  <v-list-tile-title>Collections</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_queries')" @click="open('/query-management')">
                  <v-list-tile-title>Queries</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_subcalculations')" @click="open('/subcalculation-management')">
                  <v-list-tile-title>Subcalculations</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_users')" @click="open('/user-management')">
                  <v-list-tile-title>Users</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_datasources')" @click="open('/datasources-management')">
                  <v-list-tile-title>Data Sources</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_bookmarklets')" @click="open('/bookmarklets-management')">
                  <v-list-tile-title>Bookmarklets</v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-menu>
          </v-list>
        </v-menu>

Code of the submenu that has this issue.

<v-menu v-if="showManagement" offset-x open-on-hover style="display: block;">
              <v-list-tile slot="activator">
                <v-list-tile-title>Manage</v-list-tile-title>
                <v-list-tile-action class="justify-end">
                  <v-icon>chevron_right</v-icon>
                </v-list-tile-action>
              </v-list-tile>
              <v-list>
                <v-list-tile v-if="currentUserCan('manage_groups')" @click="open('/group-management')">
                  <v-list-tile-title>Groups</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_models')" @click="open('/management')">
                  <v-list-tile-title>Models</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_collections')" @click="open('/collection-management')">
                  <v-list-tile-title>Collections</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_queries')" @click="open('/query-management')">
                  <v-list-tile-title>Queries</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_subcalculations')" @click="open('/subcalculation-management')">
                  <v-list-tile-title>Subcalculations</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_users')" @click="open('/user-management')">
                  <v-list-tile-title>Users</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_datasources')" @click="open('/datasources-management')">
                  <v-list-tile-title>Data Sources</v-list-tile-title>
                </v-list-tile>
                <v-list-tile v-if="currentUserCan('manage_bookmarklets')" @click="open('/bookmarklets-management')">
                  <v-list-tile-title>Bookmarklets</v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-menu>

[CharGomez]

Any approach to enable more than 3 multi-level menu ?

[qarty1]

It is not resolved yet? nested menu is still close on child hover.
here is my codepen.

https://codepen.io/anon/pen/arWxmK?&editable=true&editors=101

[johnleider]

While this is not going to make it for v2.0 release, I have been working with @bdeo in an implementation that would resolve this issue. The main issue that holds this back is how v-menu was initially created and finding a workaround as opposed to a full rewrite has proved more difficult than anticipated.

Thank you everyone for your patience.

[oraant]

While this is not going to make it for v2.0 release, I have been working with @bdeo in an implementation that would resolve this issue. The main issue that holds this back is how v-menu was initially created and finding a workaround as opposed to a full rewrite has proved more difficult than anticipated.

Thank you everyone for your patience.

Five month passed, the bug is still here, any news?

[danialgoodwin]

Here's my nested menu implementation for Vuetify v2.x. It works recursively, so it supports any level of nesting. Though, there is still the existing Vuetify bug at the third level if trying to use open-on-hover. If NOT using open-on-hover, then this will show all the nested menus (screenshot attached). But, the current issue with many nested submenus is that they don't all close (idea for workaround: programmatically click elsewhere on screen, or hit Esc a lot of times, or something else?)

In my reuse-able component, dan-menu.vue:

<template>
  <v-menu :offset-x='isOffsetX' :offset-y='isOffsetY' :open-on-hover='isOpenOnHover' :transition='transition'>
    <template v-slot:activator="{ on }">
      <v-btn v-if='icon' :color='color' v-on="on"><v-icon>{{ icon }}</v-icon></v-btn>
      <v-list-item v-else-if='isSubMenu' class='d-flex justify-space-between' v-on="on">
        {{ name }}<v-icon>far fa-chevron-right</v-icon>
      </v-list-item>
      <v-btn v-else :color='color' v-on="on" text tile>{{ name }}</v-btn>
    </template>
    <v-list>
      <template v-for="(item, index) in menuItems">
        <v-divider v-if='item.isDivider' :key='index' />
        <dan-menu v-else-if='item.menu' :key='index' :name='item.name' :menu-items='item.menu' @dan-menu-click='emitClickEvent'
          :is-open-on-hover=false :is-offset-x=true :is-offset-y=false :is-sub-menu=true
        />
        <v-list-item v-else :key='index' @click='emitClickEvent(item)'>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
      </template>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  name: 'DanMenu',
  props: {
    name: String,
    icon: String,
    menuItems: Array,
    color: { type: String, default: 'secondary' },
    isOffsetX: { type: Boolean, default: false },
    isOffsetY: { type: Boolean, default: true },
    isOpenOnHover: { type: Boolean, default: false },
    isSubMenu: { type: Boolean, default: false },
    transition: { type: String, default: 'scale-transition' }
  },
  methods: {
    emitClickEvent (item) {
      // this.closeAllMenus() // Theoretically, create a method that does this as a workaround
      this.$emit('dan-menu-click', item)
    }
  }
}
</script>

And, here a simplified example implementation in another component:

<template>
  <dan-menu name='File' :menu-items='fileMenuItems' @dan-menu-click='onMenuItemClick' />
</template>

<script>
import DanMenu from '@/components/dan-menu'

export default {
  name: 'My Sample Component',
  components: { DanMenu },
  data: () => ({
    fileMenuItems: [
          { name: 'Menu Item 1', action: () => { console.log('menu-item-1') } },
          { isDivider: true },
          { name: 'Menu Item 2' },
          {
            name: 'Sub-menu 1',
            menu: [
              { name: '1.1' },
              { name: '1.2 },
              {
                name: 'Sub-menu 2',
                menu: [
                  { name: '2.1' },
                  { name: '2.2' },
                  {
                    name: 'Sub-menu 3',
                    menu: [
                      { name: '3.1' },
                      { name: '3.2' },
                      {
                        name: 'Sub-menu 4',
                        menu: [
                          { name: '4.1'},
                          { name: '4.2' },
                          { name: '4.3' }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      { name: 'Menu Item 3' },
      { isDivider: true },
      { name: 'Menu Item 4', action: () => { console.log('menu-item-4') } },
      { name: 'Menu Item 5', action: () => { console.log('menu-item-5') } }
    ]
  }),
  methods: {
    onMenuItemClick (item) {
      console.log(`onMenuItemClick(), item=${item}`)
      if (item.action) {
        item.action()
      }
    }
  }
}
</script>

[danialgoodwin]

The screenshot as mentioned above. I made the screen smaller to show other edge case issues that we may want to improve later.

[ildar94]

I have the same problem as in the qarty1 did anyone come up with how to solve it?

[denisemenov]

https://codesandbox.io/s/vuetify-nested-menu-qlbnv - multi level nested menu.
I don't know why, but i can't use recursive components in sandbox.
On localhost it works without this bugs.
Enjoy.

[MIhailsPopovs]

Hello everyone,
A semi-workaround that I've found to keep the parent hover menu active when switching to the child hover menu is playing with the parent's "open-on-hover".
What I mean is if you can change the value of "open-on-hover" of an active parent from true to false, then it will stay active even if you switch to the child hover menu.

The only issue with this workaround is when you finally close the parent menu, you have to change it's "open-on-hover" back to true