title: Vuetify Navigation Drawer with Sub-Menus
body: <p>Like the title says, I'm trying to have a navigation drawer that has expandable sub-menus for certain options. Like a &quot;User Profile&quot; main menu option might have a the sub-menus &quot;Update Contact Details&quot; and &quot;Review Registration&quot;.</p>
  <p>I've tried this a handful of ways, basically coming down to the same two issues. Because each menu options is a list-tile, either the sub-menu gets stacked on the right of it (as in, the entire sub-menu is in the same tile), or the entire list of menu options has these drop down icons, when only a single menu option actually has a sub-menu. Additionally, my second code snippet below also stops you from navigating to any of the main menu links, which is not what is wanted.</p>
  <p>Example 1, where the sub-menu is stuck in the same tile as the main menu option.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div v-for=&quot;(link, i) in links&quot; :key=&quot;i&quot;&gt;
      &lt;v-list-tile v-if=&quot;!link.subLinks&quot; :to=&quot;link.to&quot; :active-class=&quot;color&quot; avatar class=&quot;v-list-item&quot;&gt;
          &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;{{ link.icon }}&lt;/v-icon&gt;
          &lt;/v-list-tile-action&gt;
          &lt;v-list-tile-title v-text=&quot;link.text&quot;/&gt;
      &lt;/v-list-tile&gt;
  
      &lt;div v-else&gt;
          &lt;v-list-tile avatar class=&quot;v-list-item&quot;&gt;
              &lt;v-list-tile-action&gt;
                  &lt;v-icon&gt;{{ link.icon }}&lt;/v-icon&gt;
              &lt;/v-list-tile-action&gt;
              &lt;v-list-tile-title v-text=&quot;link.text&quot;/&gt;
              &lt;v-list-group&gt;
                  &lt;v-list-tile sub-group v-for=&quot;(subLink, j) in link.subLinks&quot; :key=&quot;j&quot; :to=&quot;subLink.to&quot; :active-class=&quot;color&quot; avatar class=&quot;v-list-item&quot;&gt;
                      &lt;v-list-tile-title v-text=&quot;subLink.text&quot;/&gt;
                  &lt;/v-list-tile&gt;
              &lt;/v-list-group&gt;
           &lt;/v-list-tile&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Example 2, where each menu option has a drop down arrow, even ones that don't have any sub-menus.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;v-list-group v-for=&quot;(link, i) in links&quot; :key=&quot;i&quot; :prepend-icon=&quot;link.icon&quot; :to=&quot;link.to&quot; :active-class=&quot;color&quot; avatar class=&quot;v-list-item&quot;&gt;
      &lt;template v-slot:activator&gt;
          &lt;v-list-tile&gt;
              &lt;v-list-tile-title&gt;{{ link.text }}&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile&gt;
      &lt;/template&gt;
  
      &lt;v-list-tile v-for=&quot;(subLink, j) in link.subLinks&quot; :key=&quot;j&quot; :to=&quot;subLink.to&quot; :active-class=&quot;color&quot;&gt;
          &lt;v-list-tile-content&gt;
              &lt;v-list-tile-title&gt;{{ subLink.text }}&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile-content&gt;
      &lt;/v-list-tile&gt;
  &lt;/v-list-group&gt;
  </code></pre>
  <p>This is a sample of the data I'm using</p>
  <pre class="lang-js prettyprint-override"><code>links: [
      {
          to: '/',
          icon: 'mdi-view-dashboard',
          text: 'Dashboard',
      },
      {
          icon: 'mdi-account',
          text: 'User Profile',
          subLinks: [
              {
                  to: '/update-contact',
                  text: 'Update Contact Details',
              },
              {
                  to: '/review-registration',
                  text: 'Review Registration',
              },
          ],
      },
  ],
  </code></pre>
  <p>What I'd like to be able to do is have a main menu, with the option of adding sub-menus as I see fit. Unfortunately, I can't seem to figure out how to mix and match the list-group and list-tile to get what I want done. I'm super grateful for any help provided. Thanks.</p>