Component

Material Design 3 navigation bar tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Font

Enabled
Focus indicator
Focus indicator tokens
TokenValue
Navigation bar focus indicator colormd.comp.navigation-bar.focus.indicator.color
#625B71
Navigation bar focus indicator thicknessmd.comp.navigation-bar.focus.indicator.thickness
3dp
Navigation bar focus indicator offsetmd.comp.navigation-bar.focus.indicator.outline.offset
-3dp
Container
Container tokens
TokenValue
Colormd.comp.navigation-bar.container.color
#F3EDF7
Shapemd.comp.navigation-bar.container.shape
0dp
Heightmd.comp.navigation-bar.container.height
80dp
Elevationmd.comp.navigation-bar.container.elevation
3dp
Surface tint colormd.comp.navigation-bar.container.surface-tint-layer.color
#6750A4
Navigation bar container shadow colormd.comp.navigation-bar.container.shadow-color
#000000
Label text
Label text tokens
TokenValue
Fontmd.comp.navigation-bar.label-text.font
Roboto
Line heightmd.comp.navigation-bar.label-text.line-height
16pt
Sizemd.comp.navigation-bar.label-text.size
12pt
Weightmd.comp.navigation-bar.label-text.weight
500
Weight (active)md.comp.navigation-bar.active.label-text.weight
700
Trackingmd.comp.navigation-bar.label-text.tracking
0.5pt
Type stylemd.comp.navigation-bar.label-text.type
Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt
Color (active)md.comp.navigation-bar.active.label-text.color
#1D1B20
Color (inactive)md.comp.navigation-bar.inactive.label-text.color
#49454F
Color (active)md.comp.navigation-bar.active.hover.label-text.color
#1D1B20
Color (inactive)md.comp.navigation-bar.inactive.hover.label-text.color
#1D1B20
Color (active)md.comp.navigation-bar.active.focus.label-text.color
#1D1B20
Color (inactive)md.comp.navigation-bar.inactive.focus.label-text.color
#1D1B20
Color (active)md.comp.navigation-bar.active.pressed.label-text.color
#1D1B20
Color (inactive)md.comp.navigation-bar.inactive.pressed.label-text.color
#1D1B20
Icon
Icon tokens
TokenValue
Sizemd.comp.navigation-bar.icon.size
24dp
Sizemd.comp.navigation-bar.active.icon.color
#4A4458
Sizemd.comp.navigation-bar.inactive.icon.color
#49454F
Color (active)md.comp.navigation-bar.active.hover.icon.color
#4A4458
Color (inactive)md.comp.navigation-bar.inactive.hover.icon.color
#1D1B20
Color (active)md.comp.navigation-bar.active.focus.icon.color
#4A4458
Color (inactive)md.comp.navigation-bar.inactive.focus.icon.color
#1D1B20
Color (active)md.comp.navigation-bar.active.pressed.icon.color
#4A4458
Color (active)md.comp.navigation-bar.inactive.pressed.icon.color
#1D1B20
[Deprecated] Badge
[Deprecated] Badge tokens
TokenValue
Colormd.comp.navigation-bar.badge.color
#B3261E
Sizemd.comp.navigation-bar.badge.size
6dp
Shapemd.comp.navigation-bar.badge.shape
3dp
Active indicator
Active indicator tokens
TokenValue
Colormd.comp.navigation-bar.active-indicator.color
#E8DEF8
Heightmd.comp.navigation-bar.active-indicator.height
32dp
Widthmd.comp.navigation-bar.active-indicator.width
64dp
Shapemd.comp.navigation-bar.active-indicator.shape
Full
State layer
State layer tokens
TokenValue
Color (active)md.comp.navigation-bar.active.hover.state-layer.color
#1D1B20
Color (inactive)md.comp.navigation-bar.inactive.hover.state-layer.color
#1D1B20
Opacitymd.comp.navigation-bar.hover.state-layer.opacity
8%
Color (active)md.comp.navigation-bar.active.focus.state-layer.color
#1D1B20
Color (inactive)md.comp.navigation-bar.inactive.focus.state-layer.color
#1D1B20
Opacitymd.comp.navigation-bar.focus.state-layer.opacity
10%
Color (active)md.comp.navigation-bar.active.pressed.state-layer.color
#1D1B20
Color (active)md.comp.navigation-bar.inactive.pressed.state-layer.color
#1D1B20
Opacitymd.comp.navigation-bar.pressed.state-layer.opacity
10%
[Deprecated] Large badge
[Deprecated] Large badge tokens
TokenValue
Sizemd.comp.navigation-bar.large-badge.size
16dp
Shapemd.comp.navigation-bar.large-badge.shape
8dp
Colormd.comp.navigation-bar.large-badge.color
#B3261E