NavigationRail

NavigationRail 通过 NavigationRailItem 提供纵向主要导航目标，并内置 collapsed 与 expanded 状态切换。

行尺寸

在 NavigationRail 或 NavigationRailItem 上设置 size。展开状态的行使用共享的单行尺寸比例；折叠状态的行会为图标交互目标和标签预留空间，因此小尺寸也可能达到相同的内容下限。

尺寸比例、共享的 rowSize 默认值和密度行为，详见行尺寸。

示例

默认

带链接

inboxInboxInboxdraftDraftsDraftssendSentSentarchiveArchiveArchive

状态切换

Leading slot

Trailing slot

参考

结构

高亮显示

元素	部件	选择器
<nav>	root	[data-scope="navigation-rail"][data-part="root"] left_click鼠标左键单击复制
<div>	items	[data-scope="navigation-rail"][data-part="items"] left_click鼠标左键单击复制

结构

高亮显示

元素	部件	选择器
<component>	root	[data-scope="navigation-rail-item"][data-part="root"] left_click鼠标左键单击复制
<span>	indicator	[data-scope="navigation-rail-item"][data-part="indicator"] left_click鼠标左键单击复制
<span>	icon-layer	[data-scope="navigation-rail-item"][data-part="icon-layer"] left_click鼠标左键单击复制
<span>	icon	[data-scope="navigation-rail-item"][data-part="icon"] left_click鼠标左键单击复制
<span>	label条件显示	[data-scope="navigation-rail-item"][data-part="label"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
size可选	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	-	-
ariaLabel可选	Accessible label for the navigation landmark. string | undefined	"Navigation rail"
disabled可选	Disable all items inside the rail. boolean | undefined	false
modelValue可选	- string | undefined	-
state可选	- expandedcollapsed	"collapsed"	expandedcheckcollapsed

事件2

名称	类型	说明
update:modelValue	[value: string | undefined]	-
update:state	[value: "expanded" | "collapsed"]	-

插槽3

名称	参数	说明
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.

样式38

预览

Token	说明
--md-navigation-rail-bottom-spaceLayout 回退值--dp(16)	Controls bottom space.
--md-navigation-rail-collapsed-item-gapLayout 回退值--dp(4)	Controls collapsed item gap.
--md-navigation-rail-collapsed-padding-inlineLayout 回退值0	Controls collapsed padding inline.
--md-navigation-rail-collapsed-top-spaceLayout 回退值--dp(44)	Controls collapsed top space.
--md-navigation-rail-collapsed-widthLayout 回退值--dp(80)	Controls collapsed width.
--md-navigation-rail-container-colorColor 回退值var(--md-sys-color-surface)	Controls container color.
--md-navigation-rail-container-shapeShape 回退值var(--md-shape-docked)	Controls container shape.
--md-navigation-rail-expanded-item-gapLayout 回退值--dp(2)	Controls expanded item gap.
--md-navigation-rail-expanded-padding-inlineLayout 回退值--dp(8)	Controls expanded padding inline.
--md-navigation-rail-expanded-top-spaceLayout 回退值--dp(44)	Controls expanded top space.
--md-navigation-rail-expanded-widthLayout 回退值--dp(220)	Controls expanded width.
--md-navigation-rail-motionMotion 回退值var(--md-easing-spatial)	Controls motion.
--md-navigation-rail-item-active-icon-colorColor 回退值var(--md-sys-color-on-secondary-container)	Controls item active icon color.
--md-navigation-rail-item-active-indicator-colorColor 回退值var(--md-sys-color-secondary-container)	Controls item active indicator color.
--md-navigation-rail-item-active-label-colorColor 回退值var(--md-sys-color-secondary)	Controls item active label color.
--md-navigation-rail-item-active-state-layer-colorState 回退值var(--md-sys-color-on-secondary-container)	Controls item active state layer color.
--md-navigation-rail-item-collapsed-heightLayout 回退值--dp(64)	Controls item collapsed height.
--md-navigation-rail-item-collapsed-icon-label-spaceLayout 回退值--dp(4)	Controls item collapsed icon label space.
--md-navigation-rail-item-collapsed-indicator-heightLayout 回退值--dp(32)	Controls item collapsed indicator height.
--md-navigation-rail-item-collapsed-indicator-widthLayout 回退值--dp(56)	Controls item collapsed indicator width.
--md-navigation-rail-item-collapsed-padding-blockLayout 回退值--dp(6)	Controls item collapsed padding block.
--md-navigation-rail-item-disabled-opacityDisabled 回退值0.38	Controls item disabled opacity.
--md-navigation-rail-item-expanded-heightLayout 回退值--dp(56)	Controls item expanded height.
--md-navigation-rail-item-expanded-icon-label-spaceLayout 回退值--dp(8)	Controls item expanded icon label space.
--md-navigation-rail-item-expanded-indicator-heightLayout 回退值--dp(56)	Controls item expanded indicator height.
--md-navigation-rail-item-expanded-leading-spaceLayout 回退值--dp(16)	Controls item expanded leading space.
--md-navigation-rail-item-expanded-trailing-spaceLayout 回退值--dp(24)	Controls item expanded trailing space.
--md-navigation-rail-item-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls item focus indicator color.
--md-navigation-rail-item-focus-indicator-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls item focus indicator offset.
--md-navigation-rail-item-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls item focus indicator thickness.
--md-navigation-rail-item-icon-sizeLayout 回退值Typography, density and icon scale (default reference: --dp(24))	Controls item icon size.
--md-navigation-rail-item-icon-touch-target-sizeLayout 回退值--dp(32)	Controls item icon touch target size.
--md-navigation-rail-item-inactive-icon-colorColor 回退值var(--md-sys-color-on-surface-variant)	Controls item inactive icon color.
--md-navigation-rail-item-inactive-label-colorColor 回退值var(--md-sys-color-on-surface-variant)	Controls item inactive label color.
--md-navigation-rail-item-inactive-state-layer-colorState 回退值var(--md-sys-color-on-surface-variant)	Controls item inactive state layer color.
--md-navigation-rail-item-indicator-collapsed-visual-widthLayout 回退值--dp(12)	Controls item indicator collapsed visual width.
--md-navigation-rail-item-indicator-shapeShape 回退值var(--md-shape-indicator)	Controls item indicator shape.
--md-navigation-rail-item-motionMotion 回退值var(--md-easing-spatial)	Controls item motion.

NavigationRailItem

属性

名称	说明	默认值
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-
size可选	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	-
value可选	Destination value used by NavigationRail v-model. string | undefined	undefined
icon可选	Default icon name (Material Symbols Outlined). string | undefined	undefined
label可选	Fallback label text when default slot is not provided. string | undefined	undefined
href可选	Optional href. When provided, the item renders as an anchor. string | undefined	undefined
disabled可选	Disable interaction. boolean | undefined	false
selected可选	Force selected state when not controlled by NavigationRail. boolean | undefined	undefined
ariaLabel可选	Accessible label. Useful when label text is omitted visually. string | undefined	undefined

插槽2

名称	参数	说明
default	-	Label content.
icon	-	Icon content.