Vuetify: how to place v-navigation-drawer below v-app-bar

Question

The docs at https://vuetifyjs.com/en/components/application/#application-components mention that v-navigation-drawer can be configured to appear below (instead of next to) v-app-bar but they don't seem to explain how to actually do that.

Here's the layout I'm looking for (v-app-bar spanning the whole width of the window, and v-navigation-drawer sitting below v-app-bar):

How do I configure v-navigation-bar to render like that?

My current code looks like this:

<v-app>
    <v-system-bar app height="30" color="primary">The system bar</v-system-bar>

    <v-app-bar app color="secondary" dense dark>
      The application bar
    </v-app-bar>

    <v-navigation-drawer app>
      <p>Navigation drawer</p>
    </v-navigation-drawer>

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

    <v-footer app>The footer</v-footer>
    <v-bottom-navigation app color="secondary">The bottom navigation</v-bottom-navigation>
</v-app>

And it renders like this (note the navigation-drawer being next to, instead of below the application bar)

Answer 1

You need to add clipped-left prop to your v-app-bar and clipped prop to your v-navigation-drawer .