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.

Font

Enabled
Container
Container tokens
TokenValue
Navigation rail container colormd.comp.navigation-rail.container.color
#FEF7FF
Navigation rail container shapemd.comp.navigation-rail.container.shape
0dp
Navigation rail container widthmd.comp.navigation-rail.container.width
80dp
Navigation rail container elevationmd.comp.navigation-rail.container.elevation
0dp
Label text
Label text tokens
TokenValue
Navigation rail label fontmd.comp.navigation-rail.label-text.font
Roboto
Navigation rail label line heightmd.comp.navigation-rail.label-text.line-height
16pt
Navigation rail label sizemd.comp.navigation-rail.label-text.size
12pt
Navigation rail label weightmd.comp.navigation-rail.label-text.weight
500
Navigation rail active label weightmd.comp.navigation-rail.active.label-text.weight
700
Navigation rail label trackingmd.comp.navigation-rail.label-text.tracking
0.5pt
Label text type stylemd.comp.navigation-rail.label-text.type
Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt
Navigation rail label active text colormd.comp.navigation-rail.active.label-text.color
#1D1B20
Navigation rail label inactive text colormd.comp.navigation-rail.inactive.label-text.color
#49454F
Navigation rail label font familymd.comp.navigation-rail.label-text.font-family
Roboto
Navigation rail label font sizemd.comp.navigation-rail.label-text.font-size
12pt
Navigation rail label letter spacingmd.comp.navigation-rail.label-text.letter-spacing
0.5pt
Icon
Icon tokens
TokenValue
Navigation rail icon sizemd.comp.navigation-rail.icon.size
24dp
Navigation rail active icon colormd.comp.navigation-rail.active.icon.color
#4A4458
Navigation rail inactive icon colormd.comp.navigation-rail.inactive.icon.color
#49454F
Navigation rail menu icon colormd.comp.navigation-rail.menu.icon.color
#49454F
Navigation rail menu icon sizemd.comp.navigation-rail.menu.icon.size
24dp
[Deprecated] Badge
[Deprecated] Badge tokens
TokenValue
Navigation rail badge colormd.comp.navigation-rail.badge.color
#B3261E
Navigation rail badge sizemd.comp.navigation-rail.badge.size
6dp
Navigation rail badge shapemd.comp.navigation-rail.badge.shape
3dp
Active indicator
Active indicator tokens
TokenValue
Navigation rail active indicator colormd.comp.navigation-rail.active-indicator.color
#E8DEF8
Navigation rail active indicator heightmd.comp.navigation-rail.active-indicator.height
32dp
Navigation rail no label active indicator heightmd.comp.navigation-rail.no-label.active-indicator.height
56dp
Navigation rail active indicator shapemd.comp.navigation-rail.active-indicator.shape
Full
Navigation rail no label active indicator shapemd.comp.navigation-rail.no-label.active-indicator.shape
Full
Navigation rail active indicator widthmd.comp.navigation-rail.active-indicator.width
56dp
[Deprecated] Large badge
[Deprecated] Large badge tokens
TokenValue
Navigation rail large badge sizemd.comp.navigation-rail.large-badge.size
16dp
Navigation rail large badge shapemd.comp.navigation-rail.large-badge.shape
8dp
Navigation rail large badge colormd.comp.navigation-rail.large-badge.color
#B3261E
[Deprecated] Large badge label
[Deprecated] Large badge label tokens
TokenValue
Navigation rail large badge label font familymd.comp.navigation-rail.large-badge-label.font-family
Roboto
Navigation rail large badge label fontmd.comp.navigation-rail.large-badge-label.font
Roboto
Navigation rail large badge label line heightmd.comp.navigation-rail.large-badge-label.line-height
16pt
Navigation rail large badge label sizemd.comp.navigation-rail.large-badge-label.size
11pt
Navigation rail large badge label weightmd.comp.navigation-rail.large-badge-label.weight
500
Navigation rail large badge label trackingmd.comp.navigation-rail.large-badge-label.tracking
0.5pt
Navigation rail large badge label type stylemd.comp.navigation-rail.large-badge-label.type
Roboto · 11pt · weight 500 · line height 16pt · tracking 0.5pt
Navigation rail large badge label colormd.comp.navigation-rail.large-badge-label.color
#FFFFFF
Hovered
Label text
Label text tokens
TokenValue
Navigation rail active hover label text colormd.comp.navigation-rail.active.hover.label-text.color
#1D1B20
Navigation rail inactive hover label text colormd.comp.navigation-rail.inactive.hover.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Navigation rail active hover state layer colormd.comp.navigation-rail.active.hover.state-layer.color
#1D1B20
Navigation rail inactive hover state layer colormd.comp.navigation-rail.inactive.hover.state-layer.color
#1D1B20
Navigation rail hover state layer opacitymd.comp.navigation-rail.hover.state-layer.opacity
8%
Navigation rail menu hover state layer colormd.comp.navigation-rail.menu.hover.state-layer.color
#1D1B20
Navigation rail menu hover state layer opacitymd.comp.navigation-rail.menu.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Navigation rail active hover icon colormd.comp.navigation-rail.active.hover.icon.color
#4A4458
Navigation rail inactive hover icon colormd.comp.navigation-rail.inactive.hover.icon.color
#1D1B20
Navigation rail menu hover icon colormd.comp.navigation-rail.menu.hover.icon.color
#1D1B20
Focused
Label text
Label text tokens
TokenValue
Navigation rail focus label text colormd.comp.navigation-rail.active.focus.label-text.color
#1D1B20
Navigation rail inactive focus label text colormd.comp.navigation-rail.inactive.focus.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Navigation rail active focus state layer colormd.comp.navigation-rail.active.focus.state-layer.color
#1D1B20
Navigation rail inactive focus state layer colormd.comp.navigation-rail.inactive.focus.state-layer.color
#1D1B20
Navigation rail active focus state layer colormd.comp.navigation-rail.focus.state-layer.opacity
10%
Navigation rail menu focus state layer colormd.comp.navigation-rail.menu.focus.state-layer.color
#1D1B20
Navigation rail menu focus state layer opacitymd.comp.navigation-rail.menu.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Navigation rail active focus icon colormd.comp.navigation-rail.active.focus.icon.color
#4A4458
Navigation rail inactive focus icon colormd.comp.navigation-rail.inactive.focus.icon.color
#1D1B20
Navigation rail menu focus icon colormd.comp.navigation-rail.menu.focus.icon.color
#1D1B20
Pressed (ripple)
Label text
Label text tokens
TokenValue
Navigation rail active pressed label text colormd.comp.navigation-rail.active.pressed.label-text.color
#1D1B20
Navigation rail inactive pressed label text colormd.comp.navigation-rail.inactive.pressed.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Navigation rail active pressed state layer colormd.comp.navigation-rail.active.pressed.state-layer.color
#1D1B20
Navigation rail inactive pressed state layer colormd.comp.navigation-rail.inactive.pressed.state-layer.color
#1D1B20
Navigation rail pressed state layer opacitymd.comp.navigation-rail.pressed.state-layer.opacity
10%
Navigation rail menu pressed state layer colormd.comp.navigation-rail.menu.pressed.state-layer.color
#1D1B20
Navigation rail menu pressed state layer opacitymd.comp.navigation-rail.menu.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Navigation rail active pressed icon colormd.comp.navigation-rail.active.pressed.icon.color
#4A4458
Navigation rail inactive pressed icon colormd.comp.navigation-rail.inactive.pressed.icon.color
#1D1B20
Navigation rail menu pressed icon colormd.comp.navigation-rail.menu.pressed.icon.color
#1D1B20