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. For the purpose of display, some examples are wrapped in a
v-card element. Within your application you will generally place the
v-navigation-drawer as a direct child of
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
Expands from the bottom of the screen on mobile devices
A clipped drawer rests under the application toolbar
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
rgba(255, 0, 0, 0.5))
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
Collapses the drawer to a mini-variant until hovering with the mouse
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
Specifies an image background
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
The width of the content
Default Vue slot
Used to modify
v-img properties when using the src prop
The updated bound model
Navigation drawers can be customized to fit any application's design. Here we apply a custom background color and an appended content area using the append slot.
Permanent floating drawer
By default, a navigation drawer has a 1px right border that separates it from content. In this example we want to detach the drawer from the left side and let it float on its own. The floating property removes the right border (or left if using right).
When setting up drawer lists you will typically pair the nav prop with dense. This will lower the font-size of the list items and reduce the vertical space that they take up.
When using the mini-variant prop, the drawer will shrink (default 80px) and hide everything inside of
v-list except the first element. In this example we use the .sync modifier that allows us to tie the expanding/contracting of the drawer programmatically.
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile. Clicking outside of the drawer will cause it to close.
v-navigation-drawer also supports the dark variant.
In this example we define a custom width to accommodate our nested drawer. Using
v-layout we ensure that the drawer and list stack horizontally next to each other.
v-list-group component you can create up to 2 levels in depth using the sub-group prop. For more information on
v-list, navigate here.
Navigation drawers can also be positioned on the right side of your application (or an element). This is also useful for creating a side-sheet with auxillary information that may not have any navigation links. When using RTL you must explicitly define right for your drawer.
Apply a custom background to your drawer. If you need to customize
v-img's properties you can use the scoped img scoped slot.
Using the bottom prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the mobile-break-point is met.
Expand on hover
Places the component in mini-variant mode and expands once hovered. Does not alter the content area. Width can be controlled with the mini-variant-width property.