Navigation drawer
The v-navigation-drawer component is what your users will utilize to navigate through the application. The navigation-drawer is pre-configured to work with or without vue-router right out the box.
Usage
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.
API
Position the element absolutely
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content to function properly
A clipped drawer rests under the application toolbar
Applies the dark theme variant
Will automatically open/close drawer when resized depending if mobile or desktop.
Disables opening of navigation drawer when route changes
Position the element fixed
A floating drawer has no visible container (no border-right)
Sets the component height
Hide the display of the overlay
Applies the light theme variant
Condenses navigation drawer width, also accepts the .sync modifier. With this, the drawer will re-open when clicking it
Designates the width assigned when the mini prop is turned on
Sets the designated mobile breakpoint
The drawer remains visible regardless of screen size
Places the navigation drawer on the right
Remove all automated state functionality (resize, mobile, route) and manually control the drawer state
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background
Disable mobile touch functionality
Controls visibility
The width of the content
Examples
Colored drawer
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
Permanent floating drawer
A navigation drawer can be placed inside of a card and float over the content background.
Avatars
Since drawers support the v-list component, you can easily create customized dashboard solutions.
Mini
The navigation drawer also has a mini-variant which can be controlled using the prop mini-variant.sync.
Temporary
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.
Dark theme
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.
Combined drawers
Drawers are flexible and are easily adapted to any use-case.
Nested lists
List tiles can be nested a second level for even more options for your navigation