Component

Material Design 3 navigation rail 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.

Enabled
Enabled tokens
TokenValue
Nav rail item active indicator colormd.comp.nav-rail.item.active.indicator.color
#E8DEF8
Nav rail item active label text colormd.comp.nav-rail.item.active.label-text.color
#625B71
Nav rail item inactive label text colormd.comp.nav-rail.item.inactive.label-text.color
#49454F
Nav rail item active icon colormd.comp.nav-rail.item.active.icon.color
#4A4458
Nav rail item inactive icon colormd.comp.nav-rail.item.inactive.icon.color
#49454F
Hovered
Hovered tokens
TokenValue
Nav rail item active hovered state layer colormd.comp.nav-rail.item.active.hovered.state-layer.color
#4A4458
Nav rail item active hovered state layer opacitymd.comp.nav-rail.item.active.hovered.state-layer.opacity
8%
Nav rail item inactive hovered state layer colormd.comp.nav-rail.item.inactive.hovered.state-layer.color
#4A4458
Focused
Focused tokens
TokenValue
Nav rail item active focused state layer colormd.comp.nav-rail.item.active.focused.state-layer.color
#4A4458
Nav rail item active focused state layer opacitymd.comp.nav-rail.item.active.focused.state-layer.opacity
10%
Nav rail item inactive focused state layer colormd.comp.nav-rail.item.inactive.focused.state-layer.color
#4A4458
Pressed
Pressed tokens
TokenValue
Nav rail item active pressed state layer colormd.comp.nav-rail.item.active.pressed.state-layer.color
#4A4458
Nav rail item active pressed state layer opacitymd.comp.nav-rail.item.active.pressed.state-layer.opacity
10%
Nav rail item inactive pressed state layer colormd.comp.nav-rail.item.inactive.pressed.state-layer.color
#4A4458