NavigationDrawer

NavigationDrawer provides vertical navigation destinations with selectable items and expandable sections. Use iconSpace="root" when top-level icon and text-only items should share the same label column. Use iconOnly for compact drawers that show leading icons, keep labels available to assistive technologies, and expose labels as tooltips.

Anatomy

Highlight

Element	Part	Selector
<nav>	root	[data-scope="navigation-drawer"][data-part="root"] left_clickLMBCopy
<div>	headerconditional	[data-scope="navigation-drawer"][data-part="header"] left_clickLMBCopy
<div>	items	[data-scope="navigation-drawer"][data-part="items"] left_clickLMBCopy
<div>	footerconditional	[data-scope="navigation-drawer"][data-part="footer"] left_clickLMBCopy

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="navigation-drawer-item"][data-part="root"] left_clickLMBCopy
<span>	leadingconditional	[data-scope="navigation-drawer-item"][data-part="leading"] left_clickLMBCopy
<span>	labelconditional	[data-scope="navigation-drawer-item"][data-part="label"] left_clickLMBCopy
<span>	trailingconditional	[data-scope="navigation-drawer-item"][data-part="trailing"] left_clickLMBCopy

Anatomy

Highlight

Element	Part	Selector
<section>	root	[data-scope="navigation-drawer-section"][data-part="root"] left_clickLMBCopy
<button>	trigger	[data-scope="navigation-drawer-section"][data-part="trigger"] left_clickLMBCopy
<span>	leadingconditional	[data-scope="navigation-drawer-section"][data-part="leading"] left_clickLMBCopy
<span>	labelconditional	[data-scope="navigation-drawer-section"][data-part="label"] left_clickLMBCopy
<Icon>	chevron	[data-scope="navigation-drawer-section"][data-part="chevron"] left_clickLMBCopy
<div>	content	[data-scope="navigation-drawer-section"][data-part="content"] left_clickLMBCopy
<div>	content-inner	[data-scope="navigation-drawer-section"][data-part="content-inner"] left_clickLMBCopy

Props

Name	Description	Default	Control
ariaLabelOptional	Accessible label for the navigation landmark. string | undefined	"Navigation drawer"
disabledOptional	Disable all items inside the drawer. boolean | undefined	false
iconSpaceOptional	Controls where leading icon space is reserved for items and sections that do not render an icon. nonerootall	"none"	nonecheckrootall
iconOnlyOptional	Show only leading icons while keeping labels available to assistive technologies. boolean | undefined	false
modelValueOptional	- string | undefined	-

Events1

Name	Type	Description
update:modelValue	[value: string | undefined]	-

Slots3

Name	Parameters	Description
header	-	Optional header content above navigation items.
default	-	Navigation destinations. Usually NavigationDrawerItem and NavigationDrawerSection components.
footer	-	Optional footer content below navigation items.

Styling24

Preview

Token	Description
--md-navigation-drawer-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls container color.
--md-navigation-drawer-container-shapeShape Fallbackvar(--md-shape-docked)	Controls container shape.
--md-navigation-drawer-container-widthLayout Fallback--dp(360)	Controls container width.
--md-navigation-drawer-content-gapLayout Fallback--dp(4)	Controls item gap.
--md-navigation-drawer-padding-blockLayout Fallback--dp(12)	Controls block padding.
--md-navigation-drawer-padding-inlineLayout Fallback--dp(12)	Controls inline padding.
--md-navigation-drawer-item-active-icon-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls item active icon color.
--md-navigation-drawer-item-active-indicator-colorColor Fallbackvar(--md-sys-color-secondary-container)	Controls item active indicator color.
--md-navigation-drawer-item-active-label-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls item active label color.
--md-navigation-drawer-item-active-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls item active state layer color.
--md-navigation-drawer-item-disabled-opacityDisabled Fallback0.38	Controls item disabled opacity.
--md-navigation-drawer-item-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls item focus indicator color.
--md-navigation-drawer-item-focus-indicator-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls item focus indicator offset.
--md-navigation-drawer-item-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls item focus indicator thickness.
--md-navigation-drawer-item-gapLayout Fallback--dp(12)	Controls item content gap.
--md-navigation-drawer-item-heightLayout Fallback--dp(56)	Controls item minimum height.
--md-navigation-drawer-item-icon-sizeLayout Fallback--dp(24)	Controls item icon size.
--md-navigation-drawer-item-inactive-icon-colorColor Fallbackvar(--md-color-on-container)	Controls item inactive icon color.
--md-navigation-drawer-item-inactive-label-colorColor Fallbackvar(--md-color-on-container)	Controls item inactive label color.
--md-navigation-drawer-item-inactive-state-layer-colorState Fallbackvar(--md-state-layer-color, var(--md-color-on-container))	Controls item inactive state layer color.
--md-navigation-drawer-item-indicator-shapeShape Fallbackvar(--md-shape-indicator)	Controls item indicator shape.
--md-navigation-drawer-item-motionMotion Fallbackvar(--md-easing-spatial)	Controls item and section motion.
--md-navigation-drawer-item-padding-inlineLayout Fallback--dp(16)	Controls item inline padding.
--md-navigation-drawer-section-content-indentLayout Fallback0; --dp(36) with iconSpace root/all	Controls nested section content indent when iconSpace is root or all.

Examples

Default

Without Icons

Icon Only

API

NavigationDrawer

Props

Name	Description	Default
ariaLabelOptional	Accessible label for the navigation landmark. string | undefined	"Navigation drawer"
disabledOptional	Disable all items inside the drawer. boolean | undefined	false
iconSpaceOptional	Controls where leading icon space is reserved for items and sections that do not render an icon. nonerootall	"none"
iconOnlyOptional	Show only leading icons while keeping labels available to assistive technologies. boolean | undefined	false
modelValueOptional	- string | undefined	-

Events1

Name	Type	Description
update:modelValue	[value: string | undefined]	-

Slots3

Name	Parameters	Description
header	-	Optional header content above navigation items.
default	-	Navigation destinations. Usually NavigationDrawerItem and NavigationDrawerSection components.
footer	-	Optional footer content below navigation items.

NavigationDrawerItem

Props

Name	Description	Default
valueOptional	Destination value used by NavigationDrawer v-model. string | undefined	undefined
iconOptional	Default icon name (Material Symbols Outlined). string | undefined	undefined
labelOptional	Fallback label text when default slot is not provided. string | undefined	undefined
hrefOptional	Optional href. When provided, the item renders as an anchor. string | undefined	undefined
disabledOptional	Disable interaction. boolean | undefined	false
selectedOptional	Force selected state when not controlled by NavigationDrawer. boolean | undefined	undefined
ariaLabelOptional	Accessible label. Useful when label text is omitted visually. string | undefined	undefined

Events0

No events documented.

Slots3

Name	Parameters	Description
default	-	Label content.
icon	-	Icon content.
trailing	-	Optional trailing content.

NavigationDrawerSection

Props

Name	Description	Default
iconOptional	Default icon name (Material Symbols Outlined). string | undefined	undefined
labelOptional	Fallback label text when label slot is not provided. string | undefined	undefined
disabledOptional	Disable the section trigger and all nested content. boolean | undefined	false
ariaLabelOptional	Accessible label for the expand trigger. string | undefined	undefined
expandedOptional	- boolean | undefined	false

Events1

Name	Type	Description
update:expanded	[value: boolean]	-

Slots3

Name	Parameters	Description
default	-	Nested navigation destinations.
label	-	Section label content.
icon	-	Icon content.