- Navigation drawer
v-navigation-drawercomponent 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.
For most application-level drawers, you will want to use either
fixedto get the correct positioning.
The navigation drawer is primarily used to house links to the pages in your application
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
A navigation drawer can be placed inside of a card and float over the content background.
Since drawers support the
v-listcomponent, you can easily create customized dashboard solutions.
The navigation drawer also has a mini-variant which can be controlled using the prop
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.
|Boolean||False||Sets the navigation drawer position to absolute|
|Boolean||False||Designates the component as part of the application layout. Used for dynamically adjusting content sizing|
|Boolean||False||A clipped drawer rests under the application toolbar|
|Boolean||True||Applies a dark tint to the content - light themes|
|Boolean||False||Will automatically open/close drawer when resized depending if mobile or desktop.|
|Boolean||False||Disables opening of navigation drawer when route changes|
|Boolean||False||Sets the navigation drawer position to fixed|
|Boolean||False||A floating drawer has no visible container (no border-right)|
|String||100%||Sets height of the navigation drawer|
|Boolean||False||Hide the display of the overlay|
|Boolean||True||Applies a light tint to the content - dark themes|
|[Number, String]||80||Designates the width assigned when the |
|Boolean||False||Condenses navigation drawer width, also accepts the .sync modifier. With this, the drawer will re-open when clicking it|
|[Number, String]||1264||Designates the window width for the drawer to become mobile|
|Boolean||False||The drawer remains visible regardless of screen size|
|Boolean||False||Places the navigation drawer on the right|
|Boolean||False||Remove all automated state functionality (resize, mobile, route) and manually control the drawer state|
|Boolean||False||A temporary drawer sits above its application and uses a scrim (overlay) to darken the background|
|Boolean||False||Disable mobile touch functionality|
|[Number, String]||300||The width of the drawer.|
|Default Vue slot|