VNavigationDrawer API

Props

name	type	default
`absolute`	boolean	false
Applies position: absolute to the component.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`capture-focus` New in v3.11.0	boolean	false
When enabled, focus will be trapped within the component’s content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility.
`close-delay`	string \| number	undefined
Milliseconds to wait before closing component. Only applies to hover and focus events.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`disable-resize-watcher`	boolean	false
Prevents the automatic opening or closing of the drawer when resized, based on whether the device is mobile or desktop.
`disable-route-watcher`	boolean	false
Disables opening of navigation drawer when route changes.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`expand-on-hover`	boolean	false
Collapses the drawer to a rail-variant until hovering with the mouse.
`floating`	boolean	false
A floating drawer has no visible container (no border-right).
`image`	string	undefined
Apply a specific background image to the component.
`location`	'top' \| 'end' \| 'bottom' \| 'start' \| 'left' \| 'right'	'start'
Controls the edge of the screen the drawer is attached to.
`mobile`	boolean	null
Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint
`mobile-breakpoint`	number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'	undefined
Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the `temporary` prop, or activate the `bottom` prop when the breakpoint value is met. Setting the value to `0` will disable this functionality.
`model-value`	boolean	null
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`name`	string	undefined
Assign a specific name for layout registration.
`open-delay`	string \| number	undefined
Milliseconds to wait before opening component. Only applies to hover and focus events.
`order`	string \| number	0
Adjust the order of the component in relation to its registration order.
`permanent`	boolean	false
The drawer remains visible regardless of screen size.
`persistent` New in v3.6.0	boolean	false
Clicking outside or pressing esc key will not dismiss the dialog.
`rail`	boolean	null
Sets the component width to the rail-width value.
`rail-width`	string \| number	56
Sets the width for the component when `rail` is enabled.
`retain-focus` New in v3.11.0	boolean	false
Captures and keeps focus within the content element when using Tab and Shift+Tab. Recommended to be `false` when using external tools that require focus such as TinyMCE or vue-clipboard.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`scrim`	string \| boolean	true
Determines whether an overlay is used when a temporary drawer is open. Accepts true/false to enable background, and string to define color.
`sticky`	boolean	false
When true, the drawer will remain visible when scrolling past the top of the page.
`tag`	string \| (new () => any) \| FunctionalComponent	'nav'
Specify a custom tag used on the root element.
`temporary`	boolean	false
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`touchless`	boolean	false
Disable mobile touch functionality.
`width`	string \| number	256
Sets the width for the component.

Events

name	type
`update:modelValue`	[boolean]
Event that is emitted when the component’s model changes.
`update:rail`	[boolean]
Event that is emitted when the rail model changes.

Slots

never

never

{ image: string }

never

`append`
A slot at the bottom of the drawer.
`default`
The default Vue slot.
`image`
Used to modify `v-img` properties when using the src prop.
`prepend`
A slot at the top of the drawer

Exposed

boolean | 'top' | 'bottom'

`isStuck`
Used to determine if the drawer is stuck to the top of the page.

SASS Variables

name	default
`$navigation-drawer-background`	rgb(var(--v-theme-surface))
`$navigation-drawer-border`	( $navigation-drawer-border-color, $navigation-drawer-border-style, $navigation-drawer-border-width, $navigation-drawer-border-thin-width )
`$navigation-drawer-border-color`	settings.$border-color-root
`$navigation-drawer-border-radius`	map.get(settings.$rounded, '0')
`$navigation-drawer-border-style`	settings.$border-style-root
`$navigation-drawer-border-thin-width`	thin
`$navigation-drawer-border-width`	0
`$navigation-drawer-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$navigation-drawer-content-height`	100%
`$navigation-drawer-content-overflow-x`	hidden
`$navigation-drawer-content-overflow-y`	auto
`$navigation-drawer-elevation`	0
`$navigation-drawer-height`	100%
`$navigation-drawer-img-height`	inherit
`$navigation-drawer-img-object-fit`	cover
`$navigation-drawer-img-width`	inherit
`$navigation-drawer-overflow-scrolling`	touch
`$navigation-drawer-rounded-border-radius`	settings.$border-radius-root
`$navigation-drawer-scrim-opacity`	.2
`$navigation-drawer-temporary-elevation`	4
`$navigation-drawer-theme`	( $navigation-drawer-background, $navigation-drawer-color )
`$navigation-drawer-transition-duration`	0.2s
`$navigation-drawer-transition-property`	box-shadow, transform, visibility, width, height, left, right, top, bottom
`$navigation-drawer-transition-timing-function`	settings.$standard-easing

#VNavigationDrawer API

VNavigationDrawer API