NavigationDrawer

NavigationDrawer 提供纵向导航目标，其中的条目可供选择，分区可展开。 顶层图标条目和纯文本条目需要共用标签列时，使用 iconSpace="root"。 紧凑导航抽屉可使用 iconOnly：界面仅显示前置图标，同时向辅助技术提供标签，并以工具提示展示标签。 使用 shape 设置条目和分区触发器的默认形状；单个 NavigationDrawerItem 可以覆盖此设置。

行尺寸

在 NavigationDrawer 上设置 size 可调整所有导航目标。NavigationDrawerItem 可单独覆盖某一行；NavigationDrawerSection 可设置其触发项及后代导航目标的尺寸。

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

示例

默认

无图标

仅图标

参考

结构

高亮显示

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

结构

高亮显示

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

结构

高亮显示

元素	部件	选择器
<section>	root	[data-scope="navigation-drawer-section"][data-part="root"] left_click鼠标左键单击复制
<button>	trigger	[data-scope="navigation-drawer-section"][data-part="trigger"] left_click鼠标左键单击复制
<span>	leading条件显示	[data-scope="navigation-drawer-section"][data-part="leading"] left_click鼠标左键单击复制
<span>	label条件显示	[data-scope="navigation-drawer-section"][data-part="label"] left_click鼠标左键单击复制
<Icon>	chevron	[data-scope="navigation-drawer-section"][data-part="chevron"] left_click鼠标左键单击复制
<div>	content	[data-scope="navigation-drawer-section"][data-part="content"] left_click鼠标左键单击复制
<div>	content-inner	[data-scope="navigation-drawer-section"][data-part="content-inner"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
size可选	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	-	-
ariaLabel可选	Accessible label for the navigation landmark. string | undefined	"Navigation drawer"
disabled可选	Disable all items inside the drawer. boolean | undefined	false
iconSpace可选	Controls where leading icon space is reserved for items and sections that do not render an icon. nonerootall	"none"	nonecheckrootall
iconOnly可选	Show only leading icons while keeping labels available to assistive technologies. boolean | undefined	false
shape可选	Default shape for items and section triggers inside the drawer. M3Shape | undefined	undefined	-
modelValue可选	- string | undefined	-

事件1

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

插槽3

名称	参数	说明
header	-	Optional header content above navigation items.
default	-	Navigation destinations. Usually NavigationDrawerItem and NavigationDrawerSection components.
footer	-	Optional footer content below navigation items.

样式24

预览

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

NavigationDrawerItem

属性

名称	说明	默认值
size可选	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	-
value可选	Destination value used by NavigationDrawer 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
shape可选	The shape of the item. M3Shape | undefined	undefined
disabled可选	Disable interaction. boolean | undefined	false
selected可选	Force selected state when not controlled by NavigationDrawer. boolean | undefined	undefined
ariaLabel可选	Accessible label. Useful when label text is omitted visually. string | undefined	undefined

插槽3

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

NavigationDrawerSection

属性

名称	说明	默认值
shape可选	- M3Shape | undefined	-
size可选	Row size; inherits the nearest row size or defaults to medium. RowSize | undefined	-
icon可选	Default icon name (Material Symbols Outlined). string | undefined	undefined
label可选	Fallback label text when label slot is not provided. string | undefined	undefined
disabled可选	Disable the section trigger and all nested content. boolean | undefined	false
ariaLabel可选	Accessible label for the expand trigger. string | undefined	undefined
expanded可选	- boolean | undefined	false

事件1

名称	类型	说明
update:expanded	[value: boolean]	-

插槽3

名称	参数	说明
default	-	Nested navigation destinations.
label	-	Section label content.
icon	-	Icon content.