CODEWITHSUNDEEP
vuetify.jsvuejs3vuetifyjs3
spinkus
spinkus

Reputation: 8560

Vuetify: Make v-navigation-drawer take up all space to top left corner instead of v-app-bar

I have a VuetifyJS (v3) page with a v-app-bar and v-navigation-drawer both present, and both with the app prop set. The v-app-bar takes up all the horizontal space extending from the top left corner. The v-navigation-drawer starts from underneath the v-app-bar. How do reverse this relationship? I.e. make the v-navigation-drawer take up all vertical space starting from the top left corner and have the v-app-bar start from the side of the v-navigation-drawer? The vuetifyjs.com docs pages actually do this (see below). So my Q is how do I do what vuetifyjs.com is doing here?

enter image description here

enter image description here

Upvotes: 1

Views: 1421

Answers (1)

Kael Watts-Deuchar
Kael Watts-Deuchar

Reputation: 4491

Documentation for this is here: https://next.vuetifyjs.com/en/features/application-layout/

The way layout components arrange themselves is controlled by the order they appear in the template, and can be adjusted with the order prop which behaves like order in CSS.

Upvotes: 2

Related Questions