Settings

Theme
Light
Dark
System
Mixed

Direction
LTR
RTL

API
Link Only
Inline
Introduction
Why Vuetify?
Long-term support
Roadmap
Getting started
Installation
Upgrade Guide
Release notes
Contributing
Features
Application layout
Blueprints
Display & Platform
Global configuration
Icon Fonts
Internationalization (i18n)
SASS variables
Theme
Treeshaking
Styles and animations
CSS Reset
Border radius
Material color palette
Content styles
Display helpers
CSS Elevation helpers
CSS Flex helpers
CSS Float helpers
CSS Overflow helpers
Sizing
CSS Spacing helpers
Text and typography
Transitions
Components
All Components
Alerts
App bars
Application
Aspect ratios
Avatars
Badges
Banners
Bottom navigation
Breadcrumbs
Buttons
Cards
Carousels
Chips
Color pickers
Defaults provider
Dividers
Expansion panels
Footers
Form inputs & controls
Autocompletes
Checkboxes
Combobox
File inputs
Forms
Custom inputs
Radio buttons
Selects
Sliders
Range sliders
Switches
Textareas
Text fields
Grids
Groups
Button toggles
Chip groups
Item groups
Slide groups
Windows
Hover
Icons
Images
Lazy
Lists
Navigation drawers
Overlays
Custom Overlays
Dialogs
Menus
Tooltips
No SSR
Pagination
Parallax
Progress
Progress circular
Progress linear
Ratings
Sheets
Snackbars
System bars
Tables
Tabs
Theme providers
Timelines
Toolbars
API
display
v-alert-title
v-alert
v-app-bar-nav-icon
v-app-bar-title
v-app-bar
v-app
v-autocomplete
v-avatar
v-badge
v-banner-actions
v-banner-text
v-banner
v-bottom-navigation
v-breadcrumbs-divider
v-breadcrumbs-item
v-breadcrumbs
v-btn-group
v-btn-toggle
v-btn
v-card-actions
v-card-item
v-card-subtitle
v-card-text
v-card-title
v-card
v-carousel-item
v-carousel
v-checkbox-btn
v-checkbox
v-chip-group
v-chip
v-code
v-col
v-color-picker
v-combobox
v-container
v-defaults-provider
v-dialog
v-divider
v-expansion-panel-text
v-expansion-panel-title
v-expansion-panel
v-expansion-panels
v-field-label
v-field
v-file-input
v-footer
v-form
v-hover
v-icon
v-img
v-input
v-intersect
v-item-group
v-item
v-kbd
v-layout-item
v-layout
v-lazy
v-list-group
v-list-img
v-list-item-action
v-list-item-avatar
v-list-item-header
v-list-item-icon
v-list-item-media
v-list-item-subtitle
v-list-item-title
v-list-item
v-list-subheader
v-list
v-locale-provider
v-main
v-menu
v-navigation-drawer
v-no-ssr
v-overlay
v-pagination
v-parallax
v-progress-circular
v-progress-linear
v-radio-group
v-radio
v-range-slider
v-rating
v-resize
v-responsive
v-ripple
v-row
v-scroll
v-select
v-selection-control-group
v-selection-control
v-sheet
v-slide-group-item
v-slide-group
v-slider
v-snackbar
v-spacer
v-switch
v-system-bar
v-tab
v-table
v-tabs
v-text-field
v-textarea
v-theme-provider
v-timeline-item
v-timeline
v-toolbar-items
v-toolbar-title
v-toolbar
v-tooltip
v-touch
v-validation
v-window-item
v-window
Directives
Click outside
Intersection observer
Mutation observer
Resize
Ripple
Scroll
Touch
About
Meet the team
Sponsors and backers
Security disclosure
Code of conduct
This is BETA documentation for Vuetify 3, examples and information may be broken or outdated.
Components not listed in the sidebar are not available yet.
Vuetify 2 documentation can be found on vuetifyjs.com

# Navigation drawers

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. 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 v-app.

# 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. It is common to pair drawers with the v-list component using the nav property.

# API

v-navigation-drawer

# Caveats

The expand-on-hover prop does not alter the content area of v-main. To have content area respond to expand-on-hover, bind mini-variant.sync to a data prop.

# Examples

# Props

# Bottom drawer

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-breakpoint is met.

# Expand on hover

Places the component in rail mode and expands once hovered. This does not alter the content area of v-main. The width can be controlled with the rail-width property.

# Background images

Apply a custom background to your drawer via the image prop. If you need to customize it further, you can use the image slot and render your own v-img.

# Rail variant

When using the rail prop, the drawer will shrink (default 56px) and hide everything inside of v-list except the first element.

# Floating

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 position prop).

# Location

Navigation drawers can also be positioned on the right side of your application (or an element) using the location prop. This is useful for creating a side-sheet with auxiliary information that may not have any navigation links.

# Temporary

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.

# Misc

# Colored drawer

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.

# Multiple drawers

In this example we define two navigation-drawers, one using rail and one without.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Contents
  • Usage
  • API
  • Caveats
  • Examples
  • Props
  • Bottom drawer
  • Expand on hover
  • Background images
  • Rail variant
  • Floating
  • Location
  • Temporary
  • Misc
  • Colored drawer
  • Multiple drawers