NavigationRail

NavigationRail provides vertical primary destinations through NavigationRailItem, with built-in collapsed and expanded state switching.

Anatomy

Highlight

Element	Part	Selector
<nav>	root	[data-scope="navigation-rail"][data-part="root"] left_clickLMBCopy
<div>	items	[data-scope="navigation-rail"][data-part="items"] left_clickLMBCopy

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="navigation-rail-item"][data-part="root"] left_clickLMBCopy
<span>	indicator	[data-scope="navigation-rail-item"][data-part="indicator"] left_clickLMBCopy
<span>	icon-layer	[data-scope="navigation-rail-item"][data-part="icon-layer"] left_clickLMBCopy
<span>	icon	[data-scope="navigation-rail-item"][data-part="icon"] left_clickLMBCopy
<span>	labelconditional	[data-scope="navigation-rail-item"][data-part="label"] left_clickLMBCopy

Props

Name	Description	Default	Control
ariaLabelOptional	Accessible label for the navigation landmark. string | undefined	"Navigation rail"
disabledOptional	Disable all items inside the rail. boolean | undefined	false
modelValueOptional	- string | undefined	-
stateOptional	- expandedcollapsed	"collapsed"	expandedcheckcollapsed

Events2

Name	Type	Description
update:modelValue	[value: string | undefined]	-
update:state	[value: "expanded" | "collapsed"]	-

Slots3

Name	Parameters	Description
default	-	Navigation destinations. Usually a list of NavigationRailItem components.
leading	-	Leading slot for other components, such as a header or a floating action button.
trailing	-	Trailing slot for other components, such as a header or a floating action button.

Styling38

Preview

Token	Description
--md-navigation-rail-bottom-spaceLayout Fallback--dp(16)	Controls bottom space.
--md-navigation-rail-collapsed-item-gapLayout Fallback--dp(4)	Controls collapsed item gap.
--md-navigation-rail-collapsed-padding-inlineLayout Fallback0	Controls collapsed padding inline.
--md-navigation-rail-collapsed-top-spaceLayout Fallback--dp(44)	Controls collapsed top space.
--md-navigation-rail-collapsed-widthLayout Fallback--dp(80)	Controls collapsed width.
--md-navigation-rail-container-colorColor Fallbackvar(--md-sys-color-surface)	Controls container color.
--md-navigation-rail-container-shapeShape Fallbackvar(--md-shape-docked)	Controls container shape.
--md-navigation-rail-expanded-item-gapLayout Fallback--dp(2)	Controls expanded item gap.
--md-navigation-rail-expanded-padding-inlineLayout Fallback--dp(8)	Controls expanded padding inline.
--md-navigation-rail-expanded-top-spaceLayout Fallback--dp(44)	Controls expanded top space.
--md-navigation-rail-expanded-widthLayout Fallback--dp(220)	Controls expanded width.
--md-navigation-rail-motionMotion Fallbackvar(--md-easing-spatial)	Controls motion.
--md-navigation-rail-item-active-icon-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls item active icon color.
--md-navigation-rail-item-active-indicator-colorColor Fallbackvar(--md-sys-color-secondary-container)	Controls item active indicator color.
--md-navigation-rail-item-active-label-colorColor Fallbackvar(--md-sys-color-secondary)	Controls item active label color.
--md-navigation-rail-item-active-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls item active state layer color.
--md-navigation-rail-item-collapsed-heightLayout Fallback--dp(64)	Controls item collapsed height.
--md-navigation-rail-item-collapsed-icon-label-spaceLayout Fallback--dp(4)	Controls item collapsed icon label space.
--md-navigation-rail-item-collapsed-indicator-heightLayout Fallback--dp(32)	Controls item collapsed indicator height.
--md-navigation-rail-item-collapsed-indicator-widthLayout Fallback--dp(56)	Controls item collapsed indicator width.
--md-navigation-rail-item-collapsed-padding-blockLayout Fallback--dp(6)	Controls item collapsed padding block.
--md-navigation-rail-item-disabled-opacityDisabled Fallback0.38	Controls item disabled opacity.
--md-navigation-rail-item-expanded-heightLayout Fallback--dp(56)	Controls item expanded height.
--md-navigation-rail-item-expanded-icon-label-spaceLayout Fallback--dp(8)	Controls item expanded icon label space.
--md-navigation-rail-item-expanded-indicator-heightLayout Fallback--dp(56)	Controls item expanded indicator height.
--md-navigation-rail-item-expanded-leading-spaceLayout Fallback--dp(16)	Controls item expanded leading space.
--md-navigation-rail-item-expanded-trailing-spaceLayout Fallback--dp(24)	Controls item expanded trailing space.
--md-navigation-rail-item-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls item focus indicator color.
--md-navigation-rail-item-focus-indicator-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls item focus indicator offset.
--md-navigation-rail-item-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls item focus indicator thickness.
--md-navigation-rail-item-icon-sizeLayout Fallback--dp(24)	Controls item icon size.
--md-navigation-rail-item-icon-touch-target-sizeLayout Fallback--dp(32)	Controls item icon touch target size.
--md-navigation-rail-item-inactive-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls item inactive icon color.
--md-navigation-rail-item-inactive-label-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls item inactive label color.
--md-navigation-rail-item-inactive-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls item inactive state layer color.
--md-navigation-rail-item-indicator-collapsed-visual-widthLayout Fallback--dp(12)	Controls item indicator collapsed visual width.
--md-navigation-rail-item-indicator-shapeShape Fallbackvar(--md-shape-indicator)	Controls item indicator shape.
--md-navigation-rail-item-motionMotion Fallbackvar(--md-easing-spatial)	Controls item motion.

Examples

Default

With Links

inboxInboxInboxdraftDraftsDraftssendSentSentarchiveArchiveArchive

State Switch

Leading slot

Trailing slot

API

NavigationRail

Props

Name	Description	Default
ariaLabelOptional	Accessible label for the navigation landmark. string | undefined	"Navigation rail"
disabledOptional	Disable all items inside the rail. boolean | undefined	false
modelValueOptional	- string | undefined	-
stateOptional	- expandedcollapsed	"collapsed"

Events2

Name	Type	Description
update:modelValue	[value: string | undefined]	-
update:state	[value: "expanded" | "collapsed"]	-

Slots3

Name	Parameters	Description
default	-	Navigation destinations. Usually a list of NavigationRailItem components.
leading	-	Leading slot for other components, such as a header or a floating action button.
trailing	-	Trailing slot for other components, such as a header or a floating action button.

NavigationRailItem

Props

Name	Description	Default
valueOptional	Destination value used by NavigationRail 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 NavigationRail. boolean | undefined	undefined
ariaLabelOptional	Accessible label. Useful when label text is omitted visually. string | undefined	undefined

Events0

No events documented.

Slots2

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