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.

Color
Enabled
Enabled tokens
TokenValue
Nav bar container elevationmd.comp.nav-bar.container.elevation
3dp
Nav bar container shadow colormd.comp.nav-bar.container.shadow-color
#000000
Nav bar container colormd.comp.nav-bar.container.color
#F3EDF7
Nav bar item indicator colormd.comp.nav-bar.item.active.indicator.color
#E8DEF8
Nav bar item active label text colormd.comp.nav-bar.item.active.label-text.color
#625B71
Nav bar item inactive label text colormd.comp.nav-bar.item.inactive.label-text.color
#49454F
Nav bar item active icon colormd.comp.nav-bar.item.active.icon.color
#4A4458
Nav bar item inactive icon colormd.comp.nav-bar.item.inactive.icon.color
#49454F
Hovered
Hovered tokens
TokenValue
Nav bar item active hovered state layer colormd.comp.nav-bar.item.active.hovered.state-layer.color
#4A4458
Nav bar item active hovered state layer opacitymd.comp.nav-bar.item.active.hovered.state-layer.opacity
8%
Nav bar item inactive hovered state layer colormd.comp.nav-bar.item.inactive.hovered.state-layer.color
#4A4458
Focused
Focused tokens
TokenValue
Nav bar item active focused state layer colormd.comp.nav-bar.item.active.focused.state-layer.color
#4A4458
Nav bar item active focused state layer opacitymd.comp.nav-bar.item.active.focused.state-layer.opacity
10%
Nav bar item inactive focused state layer colormd.comp.nav-bar.item.inactive.focused.state-layer.color
#4A4458
Pressed
Pressed tokens
TokenValue
Nav bar item active pressed state layer colormd.comp.nav-bar.item.active.pressed.state-layer.color
#4A4458
Nav bar item active pressed state layer opacitymd.comp.nav-bar.item.active.pressed.state-layer.opacity
10%
Nav bar item inactive pressed state layer colormd.comp.nav-bar.item.inactive.pressed.state-layer.color
#4A4458
Nav item
Nav item tokens
TokenValue
Nav bar space between itemsmd.comp.nav-bar.item.between-space
0dp
Nav bar item shapemd.comp.nav-bar.item.active-indicator.shape
Full
Nav bar item space between icon label spacemd.comp.nav-bar.item.active-indicator.icon-label-space
4dp
Nav bar item icon sizemd.comp.nav-bar.item.icon.size
24dp
Container
Container tokens
TokenValue
Nav bar heightmd.comp.nav-bar.container.height
64dp
Nav bar shapemd.comp.nav-bar.container.shape
0dp