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

v-navigation-drawer
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
app
Default
false
Type
boolean

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

Name
clipped
Default
false
Type
boolean

A clipped drawer rests under the application toolbar

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disable-resize-watcher
Default
false
Type
boolean

Will automatically open/close drawer when resized depending if mobile or desktop.

Name
disable-route-watcher
Default
false
Type
boolean

Disables opening of navigation drawer when route changes

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
floating
Default
false
Type
boolean

A floating drawer has no visible container (no border-right)

Name
height
Default
100%
Type
number | string

Sets the component height

Name
hide-overlay
Default
false
Type
boolean

Hide the display of the overlay

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
mini-variant
Default
false
Type
boolean

Condenses navigation drawer width, also accepts the .sync modifier. With this, the drawer will re-open when clicking it

Name
mini-variant-width
Default
80
Type
number | string

Designates the width assigned when the mini prop is turned on

Name
mobile-break-point
Default
1264
Type
number | string

Sets the designated mobile breakpoint

Name
permanent
Default
false
Type
boolean

The drawer remains visible regardless of screen size

Name
right
Default
false
Type
boolean

Places the navigation drawer on the right

Name
stateless
Default
false
Type
boolean

Remove all automated state functionality (resize, mobile, route) and manually control the drawer state

Name
temporary
Default
false
Type
boolean

A temporary drawer sits above its application and uses a scrim (overlay) to darken the background

Name
touchless
Default
false
Type
boolean

Disable mobile touch functionality

Name
value
Default
undefined
Type
any

Controls visibility

Name
width
Default
300
Type
number | string

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

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore