Component

Material Design 3 navigation drawer 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 drawers container colormd.comp.navigation-drawer.container.color
#FEF7FF
Navigation drawers modal container colormd.comp.navigation-drawer.modal.container.color
#F7F2FA
Navigation drawers standard container colormd.comp.navigation-drawer.standard.container.color
#FEF7FF
Navigation drawers container surface tint layer colormd.comp.navigation-drawer.container.surface-tint-layer.color
#6750A4
Navigation drawers modal container elevationmd.comp.navigation-drawer.modal.container.elevation
1dp
Navigation drawers standard container elevationmd.comp.navigation-drawer.standard.container.elevation
0dp
Navigation drawers container heightmd.comp.navigation-drawer.container.height
No value specified (PERCENT)
Navigation drawers container shapemd.comp.navigation-drawer.container.shape
Default: 0dp · Top-right: 16dp · Bottom-right: 16dp
Navigation drawers bottom container shapemd.comp.navigation-drawer.bottom.container.shape
Default: 0dp · Top-left: 16dp · Top-right: 16dp
Navigation drawers container widthmd.comp.navigation-drawer.container.width
360dp
Label text
Label text tokens
TokenValue
Navigation drawers active label text colormd.comp.navigation-drawer.active.label-text.color
#4A4458
Navigation drawers inactive label text colormd.comp.navigation-drawer.inactive.label-text.color
#49454F
Navigation drawers label text fontmd.comp.navigation-drawer.label-text.font
Roboto
Navigation drawers label text line heightmd.comp.navigation-drawer.label-text.line-height
20pt
Navigation drawers label text sizemd.comp.navigation-drawer.label-text.size
14pt
Navigation drawers label text trackingmd.comp.navigation-drawer.label-text.tracking
0.1pt
Navigation drawers label text weightmd.comp.navigation-drawer.label-text.weight
500
Navigation drawers active label text weightmd.comp.navigation-drawer.active.label-text.weight
700
Navigation drawers label text typemd.comp.navigation-drawer.label-text.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Icon
Icon tokens
TokenValue
Navigation drawers active icon colormd.comp.navigation-drawer.active.icon.color
#4A4458
Navigation drawers inactive icon colormd.comp.navigation-drawer.inactive.icon.color
#49454F
Navigation drawers icon sizemd.comp.navigation-drawer.icon.size
24dp
Headline
Headline tokens
TokenValue
Navigation drawers headline colormd.comp.navigation-drawer.headline.color
#49454F
Navigation drawers headline fontmd.comp.navigation-drawer.headline.font
Roboto
Navigation drawers headline line heightmd.comp.navigation-drawer.headline.line-height
20pt
Navigation drawers headline sizemd.comp.navigation-drawer.headline.size
14pt
Navigation drawers headline trackingmd.comp.navigation-drawer.headline.tracking
0.1pt
Navigation drawers headline weightmd.comp.navigation-drawer.headline.weight
500
Type stylemd.comp.navigation-drawer.headline.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
Divider
Divider tokens
TokenValue
Navigation drawers divider colormd.comp.navigation-drawer.divider.color
#79747E
Active indicator
Active indicator tokens
TokenValue
Navigation drawers active indicator colormd.comp.navigation-drawer.active-indicator.color
#E8DEF8
Navigation drawers active indicator heightmd.comp.navigation-drawer.active-indicator.height
56dp
Navigation drawers active indicator shapemd.comp.navigation-drawer.active-indicator.shape
Full
Navigation drawers active indicator widthmd.comp.navigation-drawer.active-indicator.width
336dp
Large badge label
Large badge label tokens
TokenValue
Navigation drawers large badge label colormd.comp.navigation-drawer.large-badge-label.color
#49454F
Navigation drawers large badge label fontmd.comp.navigation-drawer.large-badge-label.font
Roboto
Navigation drawers large badge label line heightmd.comp.navigation-drawer.large-badge-label.line-height
20pt
Navigation drawers large badge label sizemd.comp.navigation-drawer.large-badge-label.size
14pt
Navigation drawers large badge label trackingmd.comp.navigation-drawer.large-badge-label.tracking
0.1pt
Navigation drawers large badge label weightmd.comp.navigation-drawer.large-badge-label.weight
500
Navigation drawers large badge label typemd.comp.navigation-drawer.large-badge-label.type
Roboto · 14pt · weight 500 · line height 20pt · tracking 0.1pt
[Deprecated] Scrim
[Deprecated] Scrim tokens
TokenValue
Navigation drawers scrim colormd.comp.navigation-drawer.scrim.color
#322F37
Navigation drawers scrim opacitymd.comp.navigation-drawer.scrim.opacity
40%
Hovered
Label text
Label text tokens
TokenValue
Navigation drawers active hover label text colormd.comp.navigation-drawer.active.hover.label-text.color
#4A4458
Navigation drawers inactive hover label text colormd.comp.navigation-drawer.inactive.hover.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Navigation drawers active hover state layer colormd.comp.navigation-drawer.active.hover.state-layer.color
#4A4458
Navigation drawers inactive hover state layer colormd.comp.navigation-drawer.inactive.hover.state-layer.color
#1D1B20
Navigation drawers hover state layer opacitymd.comp.navigation-drawer.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Navigation drawers active hover icon colormd.comp.navigation-drawer.active.hover.icon.color
#4A4458
Navigation drawers inactive hover icon colormd.comp.navigation-drawer.inactive.hover.icon.color
#1D1B20
Focused
Focus indicator
Focus indicator tokens
TokenValue
Navigation drawers focus indicator colormd.comp.navigation-drawer.focus.indicator.color
#625B71
Navigation drawers focus indicator thicknessmd.comp.navigation-drawer.focus.indicator.thickness
3dp
Navigation drawers focus indicator offsetmd.comp.navigation-drawer.focus.indicator.outline.offset
-3dp
Label text
Label text tokens
TokenValue
Navigation drawers active focus label text colormd.comp.navigation-drawer.active.focus.label-text.color
#4A4458
Navigation drawers inactive focus label text colormd.comp.navigation-drawer.inactive.focus.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Navigation drawers active focus state layer colormd.comp.navigation-drawer.active.focus.state-layer.color
#4A4458
Navigation drawers inactive focus state layer colormd.comp.navigation-drawer.inactive.focus.state-layer.color
#1D1B20
Navigation drawers focus state layer opacitymd.comp.navigation-drawer.focus.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Navigation drawers active focus icon colormd.comp.navigation-drawer.active.focus.icon.color
#4A4458
Navigation drawers inactive focus icon colormd.comp.navigation-drawer.inactive.focus.icon.color
#1D1B20
Pressed (ripple)
Label text
Label text tokens
TokenValue
Navigation drawers active pressed label text colormd.comp.navigation-drawer.active.pressed.label-text.color
#4A4458
Navigation drawers inactive pressed label text colormd.comp.navigation-drawer.inactive.pressed.label-text.color
#1D1B20
State layer
State layer tokens
TokenValue
Navigation drawers active pressed state layer colormd.comp.navigation-drawer.active.pressed.state-layer.color
#4A4458
Navigation drawers inactive pressed state layer colormd.comp.navigation-drawer.inactive.pressed.state-layer.color
#4A4458
Navigation drawers pressed state layer opacitymd.comp.navigation-drawer.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Navigation drawers active pressed icon colormd.comp.navigation-drawer.active.pressed.icon.color
#4A4458
Navigation drawers inactive pressed icon colormd.comp.navigation-drawer.inactive.pressed.icon.color
#1D1B20