Multiple navigation drawers

[LadIQe]

Hello community,

Im porting old project from vuetify 2 to 3. My problem is this:

in old app we used multiple navigation drawers inside tab components. So you have object detail with multiple tabs and some of those tabs can open right drawer. But, from what I know (i didnt create old app, Im just porting it to v3), you could have multiple drawers all over the place and everything was working as it should.

Now, in v3, drawers works differently, whole layout works differently, and from my understanding, all drawers should be at the top of the app, right? Under v-app or v-layout. So, nested childs and tabs in our app can no longer have drawers, just methods to open them from the top of the app

Thanks

[manimovassagh]

You're correct — Vuetify 3 changed how layouts and navigation drawers work compared to v2.

In Vuetify 3, v-navigation-drawer is designed to work within the layout system (v-app or v-layout). The drawers register themselves with the nearest layout parent and coordinate their positions through it. This is why they're expected to be near the top of your component tree.

That said, you absolutely can have multiple drawers in v3. Here's how to handle your use case:

Option 1: Multiple drawers at the top level, controlled from child tabs

Keep all drawers in your root layout and use a store (Pinia) or provide/inject to toggle them from anywhere:

<!-- App.vue / Layout -->
<v-app>
  <v-navigation-drawer v-model="leftDrawer" location="left">
    <!-- main nav -->
  </v-navigation-drawer>

  <v-navigation-drawer v-model="tabADrawer" location="right" temporary>
    <!-- Tab A drawer content -->
  </v-navigation-drawer>

  <v-navigation-drawer v-model="tabBDrawer" location="right" temporary>
    <!-- Tab B drawer content -->
  </v-navigation-drawer>

  <v-main>
    <router-view />
  </v-main>
</v-app>

The temporary prop makes them overlay rather than push content, which is typically what you want for contextual drawers.

Option 2: Use a nested v-layout for scoped drawers

You can nest v-layout inside your tab content to create a local layout context:

<!-- Inside a tab component -->
<v-layout>
  <v-navigation-drawer v-model="drawer" location="right" temporary>
    <!-- scoped to this tab -->
  </v-navigation-drawer>

  <v-main>
    <!-- tab content -->
  </v-main>
</v-layout>

This gives each tab its own layout scope with its own drawer. The nested v-layout creates an independent layout context.

Option 3: Single shared right drawer with dynamic content

Probably the cleanest for your case — one right drawer at the top, and swap its content based on the active tab:

<v-navigation-drawer v-model="rightDrawer" location="right" temporary>
  <component :is="activeTabDrawerContent" />
</v-navigation-drawer>

I'd recommend Option 3 for most migration scenarios since it keeps the layout simple and avoids z-index/coordination issues with multiple drawers.

[LadIQe]

Thank you for your reply.

I was upgrading old code from Vuetify 2 to v3. Guy before me did some non logical things like multiple nested drawers inside tab components etc. Problem was that those drawers were not used like drawer should be, they were permanently in reduced state, basically used only for icons.

At the end of the day, I removed them and replaced with list.

But your reply helped me better understand layout system and drawers.

Thank you