Material Design 3 "Navigation Bar" tokens: All tokens

Nav bar - Common

Color

Enabled

Enabled tokens
Token	Value
Nav bar container color`md.comp.nav-bar.container.color`	#F3EDF7 `md.comp.nav-bar.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
Nav bar container elevation`md.comp.nav-bar.container.elevation`	3dp `md.comp.nav-bar.container.elevation` `md.sys.elevation.level2`
Nav bar container shadow color`md.comp.nav-bar.container.shadow-color`	#000000 `md.comp.nav-bar.container.shadow-color` `md.sys.color.shadow` `md.ref.palette.neutral0`
Nav bar item active icon color`md.comp.nav-bar.item.active.icon.color`	#4A4458 `md.comp.nav-bar.item.active.icon.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Nav bar item indicator color`md.comp.nav-bar.item.active.indicator.color`	#E8DEF8 `md.comp.nav-bar.item.active.indicator.color` `md.sys.color.secondary-container` `md.ref.palette.secondary90`
Nav bar item active label text color`md.comp.nav-bar.item.active.label-text.color`	#625B71 `md.comp.nav-bar.item.active.label-text.color` `md.sys.color.secondary` `md.ref.palette.secondary40`
Nav bar item inactive icon color`md.comp.nav-bar.item.inactive.icon.color`	#49454F `md.comp.nav-bar.item.inactive.icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Nav bar item inactive label text color`md.comp.nav-bar.item.inactive.label-text.color`	#49454F `md.comp.nav-bar.item.inactive.label-text.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`

Hovered

Hovered tokens
Token	Value
Nav bar item active hovered state layer color`md.comp.nav-bar.item.active.hovered.state-layer.color`	#4A4458 `md.comp.nav-bar.item.active.hovered.state-layer.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Nav bar item active hovered state layer opacity`md.comp.nav-bar.item.active.hovered.state-layer.opacity`	8% `md.comp.nav-bar.item.active.hovered.state-layer.opacity` `md.sys.state.hover.state-layer-opacity`
Nav bar item inactive hovered state layer color`md.comp.nav-bar.item.inactive.hovered.state-layer.color`	#4A4458 `md.comp.nav-bar.item.inactive.hovered.state-layer.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`

Focused

Focused tokens
Token	Value
Nav bar item active focused state layer color`md.comp.nav-bar.item.active.focused.state-layer.color`	#4A4458 `md.comp.nav-bar.item.active.focused.state-layer.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Nav bar item active focused state layer opacity`md.comp.nav-bar.item.active.focused.state-layer.opacity`	10% `md.comp.nav-bar.item.active.focused.state-layer.opacity` `md.sys.state.focus.state-layer-opacity`
Nav bar item inactive focused state layer color`md.comp.nav-bar.item.inactive.focused.state-layer.color`	#4A4458 `md.comp.nav-bar.item.inactive.focused.state-layer.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`

Pressed

Pressed tokens
Token	Value
Nav bar item active pressed state layer color`md.comp.nav-bar.item.active.pressed.state-layer.color`	#4A4458 `md.comp.nav-bar.item.active.pressed.state-layer.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Nav bar item active pressed state layer opacity`md.comp.nav-bar.item.active.pressed.state-layer.opacity`	10% `md.comp.nav-bar.item.active.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity`
Nav bar item inactive pressed state layer color`md.comp.nav-bar.item.inactive.pressed.state-layer.color`	#4A4458 `md.comp.nav-bar.item.inactive.pressed.state-layer.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`

Nav item

Nav item tokens
Token	Value
Nav bar item space between icon label space`md.comp.nav-bar.item.active-indicator.icon-label-space`	4dp `md.comp.nav-bar.item.active-indicator.icon-label-space`
Nav bar item shape`md.comp.nav-bar.item.active-indicator.shape`	Full `md.comp.nav-bar.item.active-indicator.shape` `md.sys.shape.corner.full`
Nav bar space between items`md.comp.nav-bar.item.between-space`	0dp `md.comp.nav-bar.item.between-space` `md.sys.measurement.space0`
Nav bar item icon size`md.comp.nav-bar.item.icon.size`	24dp `md.comp.nav-bar.item.icon.size`

Container

Container tokens
Token	Value
Nav bar height`md.comp.nav-bar.container.height`	64dp `md.comp.nav-bar.container.height`
Nav bar shape`md.comp.nav-bar.container.shape`	0dp `md.comp.nav-bar.container.shape` `md.sys.shape.corner.none`

Nav bar - Item - Horizontal

tokens
Token	Value
Nav bar item horizontal active indicator height`md.comp.nav-bar.item.horizontal.active-indicator.height`	40dp `md.comp.nav-bar.item.horizontal.active-indicator.height`
Nav bar item horizontal active indicator icon label space`md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space`	4dp `md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space` `md.sys.measurement.space50`
Nav bar item horizontal active indicator leading space`md.comp.nav-bar.item.horizontal.active-indicator.leading-space`	16dp `md.comp.nav-bar.item.horizontal.active-indicator.leading-space` `md.sys.measurement.space200`
Nav bar item horizontal active indicator trailing space`md.comp.nav-bar.item.horizontal.active-indicator.trailing-space`	16dp `md.comp.nav-bar.item.horizontal.active-indicator.trailing-space` `md.sys.measurement.space200`
Nav bar item horizontal label text text`md.comp.nav-bar.item.horizontal.label-text.font`	Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt `md.comp.nav-bar.item.horizontal.label-text.font` `md.sys.typescale.label-medium` `md.sys.typescale.label-medium.font` `md.ref.typeface.plain` `md.sys.typescale.label-medium.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.label-medium.size` `md.sys.typescale.label-medium.line-height` `md.sys.typescale.label-medium.tracking`

Nav bar - Item - Vertical

tokens
Token	Value
Nav bar item vertical active indicator height`md.comp.nav-bar.item.vertical.active-indicator.height`	32dp `md.comp.nav-bar.item.vertical.active-indicator.height`
Nav bar item vertical active indicator icon label space`md.comp.nav-bar.item.vertical.active-indicator.icon-label-space`	4dp `md.comp.nav-bar.item.vertical.active-indicator.icon-label-space` `md.sys.measurement.space50`
Nav bar item vertical active indicator width`md.comp.nav-bar.item.vertical.active-indicator.width`	56dp `md.comp.nav-bar.item.vertical.active-indicator.width`
Nav bar item vertical container between space`md.comp.nav-bar.item.vertical.container.between-space`	6dp `md.comp.nav-bar.item.vertical.container.between-space` `md.sys.measurement.space75`
Nav bar item vertical label text`md.comp.nav-bar.item.vertical.label-text.font`	Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt `md.comp.nav-bar.item.vertical.label-text.font` `md.sys.typescale.label-medium` `md.sys.typescale.label-medium.font` `md.ref.typeface.plain` `md.sys.typescale.label-medium.weight` `md.ref.typeface.weight-medium` `md.sys.typescale.label-medium.size` `md.sys.typescale.label-medium.line-height` `md.sys.typescale.label-medium.tracking`

Navigation bar (baseline)

Enabled

Focus indicator

Focus indicator tokens
Token	Value
Navigation bar focus indicator color`md.comp.navigation-bar.focus.indicator.color`	#625B71 `md.comp.navigation-bar.focus.indicator.color` `md.sys.color.secondary` `md.ref.palette.secondary40`
Navigation bar focus indicator offset`md.comp.navigation-bar.focus.indicator.outline.offset`	-3dp `md.comp.navigation-bar.focus.indicator.outline.offset` `md.sys.state.focus-indicator.inner-offset`
Navigation bar focus indicator thickness`md.comp.navigation-bar.focus.indicator.thickness`	3dp `md.comp.navigation-bar.focus.indicator.thickness` `md.sys.state.focus-indicator.thickness`

Container

Container tokens
Token	Value
Color`md.comp.navigation-bar.container.color`	#F3EDF7 `md.comp.navigation-bar.container.color` `md.sys.color.surface-container` `md.ref.palette.neutral94`
Elevation`md.comp.navigation-bar.container.elevation`	3dp `md.comp.navigation-bar.container.elevation` `md.sys.elevation.level2`
Height`md.comp.navigation-bar.container.height`	80dp `md.comp.navigation-bar.container.height`
Navigation bar container shadow color`md.comp.navigation-bar.container.shadow-color`	#000000 `md.comp.navigation-bar.container.shadow-color` `md.sys.color.shadow` `md.ref.palette.neutral0`
Shape`md.comp.navigation-bar.container.shape`	0dp `md.comp.navigation-bar.container.shape` `md.sys.shape.corner.none`
Surface tint color`md.comp.navigation-bar.container.surface-tint-layer.color`	#6750A4 `md.comp.navigation-bar.container.surface-tint-layer.color` `md.sys.color.surface-tint` `md.sys.color.primary` `md.ref.palette.primary40`

Label text

Icon

Icon tokens
Token	Value
Color (active)`md.comp.navigation-bar.active.focus.icon.color`	#4A4458 `md.comp.navigation-bar.active.focus.icon.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Color (active)`md.comp.navigation-bar.active.hover.icon.color`	#4A4458 `md.comp.navigation-bar.active.hover.icon.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Size`md.comp.navigation-bar.active.icon.color`	#4A4458 `md.comp.navigation-bar.active.icon.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Color (active)`md.comp.navigation-bar.active.pressed.icon.color`	#4A4458 `md.comp.navigation-bar.active.pressed.icon.color` `md.sys.color.on-secondary-container` `md.ref.palette.secondary30`
Size`md.comp.navigation-bar.icon.size`	24dp `md.comp.navigation-bar.icon.size`
Color (inactive)`md.comp.navigation-bar.inactive.focus.icon.color`	#1D1B20 `md.comp.navigation-bar.inactive.focus.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Color (inactive)`md.comp.navigation-bar.inactive.hover.icon.color`	#1D1B20 `md.comp.navigation-bar.inactive.hover.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Size`md.comp.navigation-bar.inactive.icon.color`	#49454F `md.comp.navigation-bar.inactive.icon.color` `md.sys.color.on-surface-variant` `md.ref.palette.neutral-variant30`
Color (active)`md.comp.navigation-bar.inactive.pressed.icon.color`	#1D1B20 `md.comp.navigation-bar.inactive.pressed.icon.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`

[Deprecated] Badge

[Deprecated] Badge tokens
Token	Value
Color`md.comp.navigation-bar.badge.color`	#B3261E `md.comp.navigation-bar.badge.color` `md.sys.color.error` `md.ref.palette.error40`
Shape`md.comp.navigation-bar.badge.shape`	3dp `md.comp.navigation-bar.badge.shape`
Size`md.comp.navigation-bar.badge.size`	6dp `md.comp.navigation-bar.badge.size`

Active indicator

Active indicator tokens
Token	Value
Color`md.comp.navigation-bar.active-indicator.color`	#E8DEF8 `md.comp.navigation-bar.active-indicator.color` `md.sys.color.secondary-container` `md.ref.palette.secondary90`
Height`md.comp.navigation-bar.active-indicator.height`	32dp `md.comp.navigation-bar.active-indicator.height`
Shape`md.comp.navigation-bar.active-indicator.shape`	Full `md.comp.navigation-bar.active-indicator.shape` `md.sys.shape.corner.full`
Width`md.comp.navigation-bar.active-indicator.width`	64dp `md.comp.navigation-bar.active-indicator.width`

State layer

State layer tokens
Token	Value
Color (active)`md.comp.navigation-bar.active.focus.state-layer.color`	#1D1B20 `md.comp.navigation-bar.active.focus.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Color (active)`md.comp.navigation-bar.active.hover.state-layer.color`	#1D1B20 `md.comp.navigation-bar.active.hover.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Color (active)`md.comp.navigation-bar.active.pressed.state-layer.color`	#1D1B20 `md.comp.navigation-bar.active.pressed.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Opacity`md.comp.navigation-bar.focus.state-layer.opacity`	10% `md.comp.navigation-bar.focus.state-layer.opacity` `md.sys.state.focus.state-layer-opacity`
Opacity`md.comp.navigation-bar.hover.state-layer.opacity`	8% `md.comp.navigation-bar.hover.state-layer.opacity` `md.sys.state.hover.state-layer-opacity`
Color (inactive)`md.comp.navigation-bar.inactive.focus.state-layer.color`	#1D1B20 `md.comp.navigation-bar.inactive.focus.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Color (inactive)`md.comp.navigation-bar.inactive.hover.state-layer.color`	#1D1B20 `md.comp.navigation-bar.inactive.hover.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Color (active)`md.comp.navigation-bar.inactive.pressed.state-layer.color`	#1D1B20 `md.comp.navigation-bar.inactive.pressed.state-layer.color` `md.sys.color.on-surface` `md.ref.palette.neutral10`
Opacity`md.comp.navigation-bar.pressed.state-layer.opacity`	10% `md.comp.navigation-bar.pressed.state-layer.opacity` `md.sys.state.pressed.state-layer-opacity`

[Deprecated] Large badge

[Deprecated] Large badge tokens
Token	Value
Color`md.comp.navigation-bar.large-badge.color`	#B3261E `md.comp.navigation-bar.large-badge.color` `md.sys.color.error` `md.ref.palette.error40`
Shape`md.comp.navigation-bar.large-badge.shape`	8dp `md.comp.navigation-bar.large-badge.shape`
Size`md.comp.navigation-bar.large-badge.size`	16dp `md.comp.navigation-bar.large-badge.size`

Material Design 3 "Navigation Bar" tokens: All tokens

Preview

Browse tokens

See more values