title: Vuetify: how to place v-navigation-drawer below v-app-bar
body: <p>The docs at <a href="https://vuetifyjs.com/en/components/application/#application-components" rel="nofollow noreferrer">https://vuetifyjs.com/en/components/application/#application-components</a> 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.</p>
  <p>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):</p>
  <p><a href="https://i.stack.imgur.com/kxCqh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kxCqh.png" alt="enter image description here" /></a></p>
  <p>How do I configure v-navigation-bar to render like that?</p>
  <p>My current code looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;v-app&gt;
      &lt;v-system-bar app height=&quot;30&quot; color=&quot;primary&quot;&gt;The system bar&lt;/v-system-bar&gt;
  
      &lt;v-app-bar app color=&quot;secondary&quot; dense dark&gt;
        The application bar
      &lt;/v-app-bar&gt;
  
      &lt;v-navigation-drawer app&gt;
        &lt;p&gt;Navigation drawer&lt;/p&gt;
      &lt;/v-navigation-drawer&gt;
  
      &lt;v-main&gt;
        &lt;v-container&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/v-container&gt;
      &lt;/v-main&gt;
  
      &lt;v-footer app&gt;The footer&lt;/v-footer&gt;
      &lt;v-bottom-navigation app color=&quot;secondary&quot;&gt;The bottom navigation&lt;/v-bottom-navigation&gt;
  &lt;/v-app&gt;
  </code></pre>
  <p>And it renders like this (note the navigation-drawer being next to, instead of below the application bar)</p>
  <p><a href="https://i.stack.imgur.com/Y6nAt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y6nAt.png" alt="enter image description here" /></a></p>