Project notes
Updated recently
Material Design 3 "Navigation Rail" tokens: All tokens
Preview
Browse tokens
Color
Nav rail - Common
Enabled
| Token | Value |
|---|---|
Nav rail item active icon colormd.comp.nav-rail.item.active.icon.color | #4A4458 md.comp.nav-rail.item.active.icon.color
|
Nav rail item active indicator colormd.comp.nav-rail.item.active.indicator.color | #E8DEF8 md.comp.nav-rail.item.active.indicator.color
|
Nav rail item active label text colormd.comp.nav-rail.item.active.label-text.color | #625B71 md.comp.nav-rail.item.active.label-text.color
|
Nav rail item inactive icon colormd.comp.nav-rail.item.inactive.icon.color | #49454F md.comp.nav-rail.item.inactive.icon.color
|
Nav rail item inactive label text colormd.comp.nav-rail.item.inactive.label-text.color | #49454F md.comp.nav-rail.item.inactive.label-text.color
|
Hovered
| Token | Value |
|---|---|
Nav rail item active hovered state layer colormd.comp.nav-rail.item.active.hovered.state-layer.color | #4A4458 md.comp.nav-rail.item.active.hovered.state-layer.color
|
Nav rail item active hovered state layer opacitymd.comp.nav-rail.item.active.hovered.state-layer.opacity | 8% md.comp.nav-rail.item.active.hovered.state-layer.opacity
|
Nav rail item inactive hovered state layer colormd.comp.nav-rail.item.inactive.hovered.state-layer.color | #4A4458 md.comp.nav-rail.item.inactive.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Nav rail item active focused state layer colormd.comp.nav-rail.item.active.focused.state-layer.color | #4A4458 md.comp.nav-rail.item.active.focused.state-layer.color
|
Nav rail item active focused state layer opacitymd.comp.nav-rail.item.active.focused.state-layer.opacity | 10% md.comp.nav-rail.item.active.focused.state-layer.opacity
|
Nav rail item inactive focused state layer colormd.comp.nav-rail.item.inactive.focused.state-layer.color | #4A4458 md.comp.nav-rail.item.inactive.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Nav rail item active pressed state layer colormd.comp.nav-rail.item.active.pressed.state-layer.color | #4A4458 md.comp.nav-rail.item.active.pressed.state-layer.color
|
Nav rail item active pressed state layer opacitymd.comp.nav-rail.item.active.pressed.state-layer.opacity | 10% md.comp.nav-rail.item.active.pressed.state-layer.opacity
|
Nav rail item inactive pressed state layer colormd.comp.nav-rail.item.inactive.pressed.state-layer.color | #4A4458 md.comp.nav-rail.item.inactive.pressed.state-layer.color
|
Nav rail - Collapsed
| Token | Value |
|---|---|
Nav rail collapsed container colormd.comp.nav-rail.collapsed.container.color | #FEF7FF md.comp.nav-rail.collapsed.container.color
|
Nav rail collapsed container elevationmd.comp.nav-rail.collapsed.container.elevation | 0dp md.comp.nav-rail.collapsed.container.elevation
|
Nav rail collapsed container shapemd.comp.nav-rail.collapsed.container.shape | 0dp md.comp.nav-rail.collapsed.container.shape
|
Nav rail collapsed container widthmd.comp.nav-rail.collapsed.container.width | 96dp md.comp.nav-rail.collapsed.container.width |
Nav rail collapsed item vertical spacemd.comp.nav-rail.collapsed.item.vertical-space | 4dp md.comp.nav-rail.collapsed.item.vertical-space
|
Nav rail collapsed narrow container widthmd.comp.nav-rail.collapsed.narrow.container.width | 80dp md.comp.nav-rail.collapsed.narrow.container.width |
Nav rail collapsed item top spacemd.comp.nav-rail.collapsed.top-space | 44dp md.comp.nav-rail.collapsed.top-space |
Nav rail - Expanded
| Token | Value |
|---|---|
Nav rail expanded between item spacemd.comp.nav-rail.expanded.between-item-space | 0dp md.comp.nav-rail.expanded.between-item-space |
Nav rail expanded container colormd.comp.nav-rail.expanded.container.color | #FEF7FF md.comp.nav-rail.expanded.container.color
|
Nav rail expanded container elevationmd.comp.nav-rail.expanded.container.elevation | 0dp md.comp.nav-rail.expanded.container.elevation
|
Nav rail expanded container shapemd.comp.nav-rail.expanded.container.shape | 0dp md.comp.nav-rail.expanded.container.shape
|
Nav rail expanded container width maximummd.comp.nav-rail.expanded.container.width.maximum | 360dp md.comp.nav-rail.expanded.container.width.maximum |
Nav rail expanded container width minimummd.comp.nav-rail.expanded.container.width.minimum | 220dp md.comp.nav-rail.expanded.container.width.minimum |
Nav rail expanded modal container colormd.comp.nav-rail.expanded.modal.container.color | #F3EDF7 md.comp.nav-rail.expanded.modal.container.color
|
Nav rail expanded modal container elevationmd.comp.nav-rail.expanded.modal.container.elevation | 3dp md.comp.nav-rail.expanded.modal.container.elevation
|
Nav rail expanded modal container shapemd.comp.nav-rail.expanded.modal.container.shape | 16dp md.comp.nav-rail.expanded.modal.container.shape
|
Nav rail expanded top spacemd.comp.nav-rail.expanded.top-space | 44dp md.comp.nav-rail.expanded.top-space |
Nav rail expanded vertical trailing spacemd.comp.nav-rail.expanded.vertical.trailing-space | 20dp md.comp.nav-rail.expanded.vertical.trailing-space |
Nav rail item - Common
| Token | Value |
|---|---|
Nav rail item active indicator icon label spacemd.comp.nav-rail.item.active-indicator.icon-label-space | 8dp md.comp.nav-rail.item.active-indicator.icon-label-space
|
Nav rail item active indicator leading spacemd.comp.nav-rail.item.active-indicator.leading-space | 16dp md.comp.nav-rail.item.active-indicator.leading-space
|
Nav rail item active indicator shapemd.comp.nav-rail.item.active-indicator.shape | Full md.comp.nav-rail.item.active-indicator.shape
|
Nav rail item active indicator trailing spacemd.comp.nav-rail.item.active-indicator.trailing-space | 16dp md.comp.nav-rail.item.active-indicator.trailing-space
|
Nav rail item container heightmd.comp.nav-rail.item.container.height | 64dp md.comp.nav-rail.item.container.height |
Nav rail item container shapemd.comp.nav-rail.item.container.shape | 0dp md.comp.nav-rail.item.container.shape
|
Nav rail item container vertical spacemd.comp.nav-rail.item.container.vertical-space | 6dp md.comp.nav-rail.item.container.vertical-space
|
Nav rail item header space minimummd.comp.nav-rail.item.header-space-minimum | 40dp md.comp.nav-rail.item.header-space-minimum
|
Nav rail item icon sizemd.comp.nav-rail.item.icon.size | 24dp md.comp.nav-rail.item.icon.size |
Nav rail item short container heightmd.comp.nav-rail.item.short.container.height | 56dp md.comp.nav-rail.item.short.container.height |
Nav rail item - Horizontal
| Token | Value |
|---|---|
Nav rail item horizontal active indicator heightmd.comp.nav-rail.item.horizontal.active-indicator.height | 56dp md.comp.nav-rail.item.horizontal.active-indicator.height |
Nav rail item horizontal full width leading spacemd.comp.nav-rail.item.horizontal.full-width.leading-space | 16dp md.comp.nav-rail.item.horizontal.full-width.leading-space
|
Nav rail item horizontal full width trailing spacemd.comp.nav-rail.item.horizontal.full-width.trailing-space | 16dp md.comp.nav-rail.item.horizontal.full-width.trailing-space
|
Nav rail item horizontal icon-label-spacemd.comp.nav-rail.item.horizontal.icon-label-space | 8dp md.comp.nav-rail.item.horizontal.icon-label-space
|
Nav rail item horizontal label textmd.comp.nav-rail.item.horizontal.label-text.font | Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt md.comp.nav-rail.item.horizontal.label-text.font
|
Nav rail item - Vertical
| Token | Value |
|---|---|
Nav rail item vertical active indicator heightmd.comp.nav-rail.item.vertical.active-indicator.height | 32dp md.comp.nav-rail.item.vertical.active-indicator.height |
Nav rail item vertical active indicator widthmd.comp.nav-rail.item.vertical.active-indicator.width | 56dp md.comp.nav-rail.item.vertical.active-indicator.width |
Nav rail item vertical icon label spacemd.comp.nav-rail.item.vertical.icon-label-space | 4dp md.comp.nav-rail.item.vertical.icon-label-space
|
Nav rail item vertical label textmd.comp.nav-rail.item.vertical.label-text.font | Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt md.comp.nav-rail.item.vertical.label-text.font
|
Nav rail item vertical icon leading-spacemd.comp.nav-rail.item.vertical.leading-space | 16dp md.comp.nav-rail.item.vertical.leading-space
|
Nav rail item vertical icon trailing spacemd.comp.nav-rail.item.vertical.trailing-space | 16dp md.comp.nav-rail.item.vertical.trailing-space
|
Navigation rail (baseline)
Enabled
Container
| Token | Value |
|---|---|
Navigation rail container colormd.comp.navigation-rail.container.color | #FEF7FF md.comp.navigation-rail.container.color
|
Navigation rail container elevationmd.comp.navigation-rail.container.elevation | 0dp md.comp.navigation-rail.container.elevation
|
Navigation rail container shapemd.comp.navigation-rail.container.shape | 0dp md.comp.navigation-rail.container.shape
|
Navigation rail container widthmd.comp.navigation-rail.container.width | 80dp md.comp.navigation-rail.container.width |
Label text
| Token | Value |
|---|---|
Navigation rail label active text colormd.comp.navigation-rail.active.label-text.color | #1D1B20 md.comp.navigation-rail.active.label-text.color
|
Navigation rail active label weightmd.comp.navigation-rail.active.label-text.weight | 700 md.comp.navigation-rail.active.label-text.weight
|
Navigation rail label inactive text colormd.comp.navigation-rail.inactive.label-text.color | #49454F md.comp.navigation-rail.inactive.label-text.color
|
Navigation rail label fontmd.comp.navigation-rail.label-text.font | Roboto md.comp.navigation-rail.label-text.font
|
Navigation rail label font familymd.comp.navigation-rail.label-text.font-family | Roboto md.comp.navigation-rail.label-text.font-family
|
Navigation rail label font sizemd.comp.navigation-rail.label-text.font-size | 12pt md.comp.navigation-rail.label-text.font-size
|
Navigation rail label letter spacingmd.comp.navigation-rail.label-text.letter-spacing | 0.5pt md.comp.navigation-rail.label-text.letter-spacing
|
Navigation rail label line heightmd.comp.navigation-rail.label-text.line-height | 16pt md.comp.navigation-rail.label-text.line-height
|
Navigation rail label sizemd.comp.navigation-rail.label-text.size | 12pt md.comp.navigation-rail.label-text.size
|
Navigation rail label trackingmd.comp.navigation-rail.label-text.tracking | 0.5pt md.comp.navigation-rail.label-text.tracking
|
Label text type stylemd.comp.navigation-rail.label-text.type | Roboto · 12pt · weight 500 · line height 16pt · tracking 0.5pt md.comp.navigation-rail.label-text.type
|
Navigation rail label weightmd.comp.navigation-rail.label-text.weight | 500 md.comp.navigation-rail.label-text.weight
|
Icon
| Token | Value |
|---|---|
Navigation rail active icon colormd.comp.navigation-rail.active.icon.color | #4A4458 md.comp.navigation-rail.active.icon.color
|
Navigation rail icon sizemd.comp.navigation-rail.icon.size | 24dp md.comp.navigation-rail.icon.size |
Navigation rail inactive icon colormd.comp.navigation-rail.inactive.icon.color | #49454F md.comp.navigation-rail.inactive.icon.color
|
Navigation rail menu icon colormd.comp.navigation-rail.menu.icon.color | #49454F md.comp.navigation-rail.menu.icon.color
|
Navigation rail menu icon sizemd.comp.navigation-rail.menu.icon.size | 24dp md.comp.navigation-rail.menu.icon.size |
[Deprecated] Badge
| Token | Value |
|---|---|
Navigation rail badge colormd.comp.navigation-rail.badge.color | #B3261E md.comp.navigation-rail.badge.color
|
Navigation rail badge shapemd.comp.navigation-rail.badge.shape | 3dp md.comp.navigation-rail.badge.shape |
Navigation rail badge sizemd.comp.navigation-rail.badge.size | 6dp md.comp.navigation-rail.badge.size |
Active indicator
| Token | Value |
|---|---|
Navigation rail active indicator colormd.comp.navigation-rail.active-indicator.color | #E8DEF8 md.comp.navigation-rail.active-indicator.color
|
Navigation rail active indicator heightmd.comp.navigation-rail.active-indicator.height | 32dp md.comp.navigation-rail.active-indicator.height |
Navigation rail active indicator shapemd.comp.navigation-rail.active-indicator.shape | Full md.comp.navigation-rail.active-indicator.shape
|
Navigation rail active indicator widthmd.comp.navigation-rail.active-indicator.width | 56dp md.comp.navigation-rail.active-indicator.width |
Navigation rail no label active indicator heightmd.comp.navigation-rail.no-label.active-indicator.height | 56dp md.comp.navigation-rail.no-label.active-indicator.height |
Navigation rail no label active indicator shapemd.comp.navigation-rail.no-label.active-indicator.shape | Full md.comp.navigation-rail.no-label.active-indicator.shape
|
[Deprecated] Large badge
| Token | Value |
|---|---|
Navigation rail large badge colormd.comp.navigation-rail.large-badge.color | #B3261E md.comp.navigation-rail.large-badge.color
|
Navigation rail large badge shapemd.comp.navigation-rail.large-badge.shape | 8dp md.comp.navigation-rail.large-badge.shape |
Navigation rail large badge sizemd.comp.navigation-rail.large-badge.size | 16dp md.comp.navigation-rail.large-badge.size |
[Deprecated] Large badge label
| Token | Value |
|---|---|
Navigation rail large badge label colormd.comp.navigation-rail.large-badge-label.color | #FFFFFF md.comp.navigation-rail.large-badge-label.color
|
Navigation rail large badge label fontmd.comp.navigation-rail.large-badge-label.font | Roboto md.comp.navigation-rail.large-badge-label.font
|
Navigation rail large badge label font familymd.comp.navigation-rail.large-badge-label.font-family | Roboto md.comp.navigation-rail.large-badge-label.font-family
|
Navigation rail large badge label line heightmd.comp.navigation-rail.large-badge-label.line-height | 16pt md.comp.navigation-rail.large-badge-label.line-height
|
Navigation rail large badge label sizemd.comp.navigation-rail.large-badge-label.size | 11pt md.comp.navigation-rail.large-badge-label.size
|
Navigation rail large badge label trackingmd.comp.navigation-rail.large-badge-label.tracking | 0.5pt md.comp.navigation-rail.large-badge-label.tracking
|
Navigation rail large badge label type stylemd.comp.navigation-rail.large-badge-label.type | Roboto · 11pt · weight 500 · line height 16pt · tracking 0.5pt md.comp.navigation-rail.large-badge-label.type
|
Navigation rail large badge label weightmd.comp.navigation-rail.large-badge-label.weight | 500 md.comp.navigation-rail.large-badge-label.weight
|
Hovered
Label text
| Token | Value |
|---|---|
Navigation rail active hover label text colormd.comp.navigation-rail.active.hover.label-text.color | #1D1B20 md.comp.navigation-rail.active.hover.label-text.color
|
Navigation rail inactive hover label text colormd.comp.navigation-rail.inactive.hover.label-text.color | #1D1B20 md.comp.navigation-rail.inactive.hover.label-text.color
|
State layer
| Token | Value |
|---|---|
Navigation rail active hover state layer colormd.comp.navigation-rail.active.hover.state-layer.color | #1D1B20 md.comp.navigation-rail.active.hover.state-layer.color
|
Navigation rail hover state layer opacitymd.comp.navigation-rail.hover.state-layer.opacity | 8% md.comp.navigation-rail.hover.state-layer.opacity
|
Navigation rail inactive hover state layer colormd.comp.navigation-rail.inactive.hover.state-layer.color | #1D1B20 md.comp.navigation-rail.inactive.hover.state-layer.color
|
Navigation rail menu hover state layer colormd.comp.navigation-rail.menu.hover.state-layer.color | #1D1B20 md.comp.navigation-rail.menu.hover.state-layer.color
|
Navigation rail menu hover state layer opacitymd.comp.navigation-rail.menu.hover.state-layer.opacity | 8% md.comp.navigation-rail.menu.hover.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Navigation rail active hover icon colormd.comp.navigation-rail.active.hover.icon.color | #4A4458 md.comp.navigation-rail.active.hover.icon.color
|
Navigation rail inactive hover icon colormd.comp.navigation-rail.inactive.hover.icon.color | #1D1B20 md.comp.navigation-rail.inactive.hover.icon.color
|
Navigation rail menu hover icon colormd.comp.navigation-rail.menu.hover.icon.color | #1D1B20 md.comp.navigation-rail.menu.hover.icon.color
|
Focused
Label text
| Token | Value |
|---|---|
Navigation rail focus label text colormd.comp.navigation-rail.active.focus.label-text.color | #1D1B20 md.comp.navigation-rail.active.focus.label-text.color
|
Navigation rail inactive focus label text colormd.comp.navigation-rail.inactive.focus.label-text.color | #1D1B20 md.comp.navigation-rail.inactive.focus.label-text.color
|
State layer
| Token | Value |
|---|---|
Navigation rail active focus state layer colormd.comp.navigation-rail.active.focus.state-layer.color | #1D1B20 md.comp.navigation-rail.active.focus.state-layer.color
|
Navigation rail active focus state layer colormd.comp.navigation-rail.focus.state-layer.opacity | 10% md.comp.navigation-rail.focus.state-layer.opacity
|
Navigation rail inactive focus state layer colormd.comp.navigation-rail.inactive.focus.state-layer.color | #1D1B20 md.comp.navigation-rail.inactive.focus.state-layer.color
|
Navigation rail menu focus state layer colormd.comp.navigation-rail.menu.focus.state-layer.color | #1D1B20 md.comp.navigation-rail.menu.focus.state-layer.color
|
Navigation rail menu focus state layer opacitymd.comp.navigation-rail.menu.focus.state-layer.opacity | 10% md.comp.navigation-rail.menu.focus.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Navigation rail active focus icon colormd.comp.navigation-rail.active.focus.icon.color | #4A4458 md.comp.navigation-rail.active.focus.icon.color
|
Navigation rail inactive focus icon colormd.comp.navigation-rail.inactive.focus.icon.color | #1D1B20 md.comp.navigation-rail.inactive.focus.icon.color
|
Navigation rail menu focus icon colormd.comp.navigation-rail.menu.focus.icon.color | #1D1B20 md.comp.navigation-rail.menu.focus.icon.color
|
Pressed (ripple)
Label text
| Token | Value |
|---|---|
Navigation rail active pressed label text colormd.comp.navigation-rail.active.pressed.label-text.color | #1D1B20 md.comp.navigation-rail.active.pressed.label-text.color
|
Navigation rail inactive pressed label text colormd.comp.navigation-rail.inactive.pressed.label-text.color | #1D1B20 md.comp.navigation-rail.inactive.pressed.label-text.color
|
State layer
| Token | Value |
|---|---|
Navigation rail active pressed state layer colormd.comp.navigation-rail.active.pressed.state-layer.color | #1D1B20 md.comp.navigation-rail.active.pressed.state-layer.color
|
Navigation rail inactive pressed state layer colormd.comp.navigation-rail.inactive.pressed.state-layer.color | #1D1B20 md.comp.navigation-rail.inactive.pressed.state-layer.color
|
Navigation rail menu pressed state layer colormd.comp.navigation-rail.menu.pressed.state-layer.color | #1D1B20 md.comp.navigation-rail.menu.pressed.state-layer.color
|
Navigation rail menu pressed state layer opacitymd.comp.navigation-rail.menu.pressed.state-layer.opacity | 10% md.comp.navigation-rail.menu.pressed.state-layer.opacity
|
Navigation rail pressed state layer opacitymd.comp.navigation-rail.pressed.state-layer.opacity | 10% md.comp.navigation-rail.pressed.state-layer.opacity
|
Icon
| Token | Value |
|---|---|
Navigation rail active pressed icon colormd.comp.navigation-rail.active.pressed.icon.color | #4A4458 md.comp.navigation-rail.active.pressed.icon.color
|
Navigation rail inactive pressed icon colormd.comp.navigation-rail.inactive.pressed.icon.color | #1D1B20 md.comp.navigation-rail.inactive.pressed.icon.color
|
Navigation rail menu pressed icon colormd.comp.navigation-rail.menu.pressed.icon.color | #1D1B20 md.comp.navigation-rail.menu.pressed.icon.color
|