Navigation Drawer

info

For more details about Vuetify’s usage of NavigationDrawer component, click NavigationDrawer page.
For more prop explanations, click Vuetify NavigationDrawer API page.

Props

Attribute	Description	Type	Default
absolute	Applies position: absolute to the component.	boolean	false
bottom	Expands from the bottom of the screen on mobile devices.	boolean	false
class	prop that determines the class to add to the menu.	string	undefined
clipped	A clipped drawer rests under the application toolbar. Note: requires the clipped-left or clipped-right prop on AppBar to work as intended.	boolean	false
dark	Applies the dark theme variant to the component.	boolean	false
disableResizeWatcher	Will automatically open/close drawer when resized depending if mobile or desktop.	boolean	false
expandOnHover	Collapses the drawer to a mini-variant until hovering with the mouse.	boolean	false
fixed	Applies position: fixed to the component.	boolean	false
mobileBreakpoint	Sets the designated mobile breakpoint for the component.	number | string	undefined
miniVariant	Condenses navigation drawer width, also accepts the .sync modifier. With this, the drawer will re-open when clicking it.	boolean	false
permanent	The drawer remains visible regardless of screen size.	boolean	false
right	Places the navigation drawer on the right.	boolean	false
temporary	A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.	boolean	false
value	Controls whether the component is visible or hidden.	any	undefined
visible	Visibility of NavigationDrawer component.	boolean	true

Events

Attribute	Description
input	The updated bound model
update:mini-variant	The mini-variant.sync event

Samples Qjson

NavigationDrawerExample
NavigationDrawerWithAppBar