Navigation drawer

The navigation drawer is primarily used to house links to the pages in your application. Using null as the starting value for its v-model will initialize the drawer as closed on mobile and as open on desktop.

Navigation drawers can be customized to fit any application's design. While any component can be used within a drawer, the primary ones you will use are v-list, all of the list children components and v-divider

A navigation drawer can be placed inside of a card and float over the content background.

Since drawers support the v-list component, you can easily create customized dashboard solutions.

The navigation drawer also has a mini-variant which can be controlled using the prop mini-variant.sync.

A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked on the persistent drawer when on mobile. Clicking outside of the drawer will cause it to close.

Vuetify also supports the dark application theme. This will not override components that have default themes so in some cases it will be necessary to manually set the dark theme accents.

Drawers are flexible and are easily adapted to any use-case.

List tiles can be nested a second level for even more options for your navigation