Vuetify Navigation Drawer with Sub-Menus

I was looking to do the same thing, here's how I solved it.

Data:

links: [
    {
        to     : '/dashboard',
        icon   : 'mdi-view-dashboard',
        text   : 'Dashboard',
    },
    {
        icon     : 'mdi-tennis',
        text     : 'Players',
        subLinks : [
            {
                text : 'Players list',
                to    : '/players',
            },
            {
                text : 'Import WTA Players',
                to    : '/players/import',
            },
        ]
    },
    {
        to     : '/tournaments',
        icon   : 'mdi-trophy',
        text   : 'Tournaments',
    },
]

Template:

<v-list>
    <div v-for="(link, i) in links">

        <v-list-tile
            v-if="!link.subLinks"
            :key="i"
            :to="link.to"
            :active-class="color"
            avatar
            class="v-list-item"
        >
            <v-list-tile-action>
                <v-icon>{{ link.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-title v-text="link.text" />
        </v-list-tile>

        <v-list-group
            v-else
            :key="link.text"
            no-action
        >
            <template v-slot:activator>
               <v-list-tile>
                 <v-list-tile-content>
                   <v-list-tile-title>{{ link.text }}</v-list-tile-title>
                 </v-list-tile-content>
               </v-list-tile>
             </template>

            <v-list-tile
                v-for="sublink in link.subLinks"
                :to="sublink.to"
                :key="sublink.text"
            >
                <v-list-tile-title v-text="sublink.text" />
            </v-list-tile>

        </v-list-group>

    </div>
</v-list>

I'm sorry but I don't have time to make a pen. Hope this helps !

I don't have enough reputation to add a comment but this will give you a bit of a better layout and function correctly (in the one posted above links didn't work for some reason and the naming was a bit off)

<template>
    <v-navigation-drawer
      app
      clipped
      permanent
      mini-variant
      expand-on-hover>
      <!-- -->

      <v-list nav dense>
       <div v-for="(link, i) in links" :key="i">

        <v-list-item
            v-if="!link.subLinks"
            :to="link.to"
            :active-class="color"
            avatar
            class="v-list-item"
        >
            <v-list-item-icon>
                <v-icon>{{ link.icon }}</v-icon>
            </v-list-item-icon>

            <v-list-item-title v-text="link.text" />
        </v-list-item>

        <v-list-group
            v-else
            :key="link.text"
            no-action
            :prepend-icon="link.icon"
            :value="false"
        >
            <template v-slot:activator>
              <v-list-item-title>{{ link.text }}</v-list-item-title>
             </template>

            <v-list-item
                v-for="sublink in link.subLinks"
                :to="sublink.to"
                :key="sublink.text"
            >
                <v-list-item-icon>
                  <v-icon>{{ sublink.icon }}</v-icon>
                </v-list-item-icon>
                <v-list-item-title>{{ sublink.text }}</v-list-item-title>

            </v-list-item>

        </v-list-group>

    </div>

      </v-list>

    </v-navigation-drawer>
</template>

<script>
export default {
  data: () => ({
links: [
    {
        to     : '/dashboard',
        icon   : 'mdi-view-dashboard',
        text   : 'Dashboard',
    },
    {
        icon     : 'mdi-folder',
        text     : 'Templates',
        subLinks : [
            {
                text : 'View Templates',
                to    : '/templates',
                icon  : 'mdi-view-list'
            },
            {
                text : 'New Template',
                to    : '/templates/new',
                icon  : 'mdi-plus'
            },
        ]
    },
    {
        icon     : 'mdi-application',
        text     : 'Applications',
        subLinks : [
            {
                text : 'View Applications',
                to    : '/apps',
                icon  : 'mdi-view-list'
            },
            {
                text : 'New Application',
                to    : '/apps',
                icon  : 'mdi-plus'
            },
        ]
    },
]
  })
}
</script>

<style scoped>
.v-application--is-ltr .v-list--dense.v-list--nav .v-list-group--no-action > .v-list-group__items > .v-list-item {
  padding: 0 8px;
}
</style>

Hope this can help. Basically, the menu on the navigation drawer component (v-navigation-drawer) using the list component (v-list).

From the documentation, you can find a way to add submenu on list component on the part of nested list

Cheers,