Navigation bar

Navigation bars let people switch between UI views on smaller devices. They’re a common navigation component on handheld screens.

Overview · Specs · Guidelines · Accessibility

Variants

1. Flexible navigation bar

Baseline variants

The baseline nav bar is no longer recommended, and should be replaced by the flexible nav bar, which is shorter and supports horizontal navigation items in medium windows. View baseline nav bar specs

1. Navigation bar (not recommended)

Variant	M3	M3 Expressive
Flexible navigation bar	--	Available
Navigation bar	Available	Not recommended. Use flexible navigation bar.

Configurations

In compact windows, navigation bars use vertical items. In medium windows, navigation bars should use horizontal items.

1. Vertical navigation items
2. Horizontal navigation items

Category	Configuration	M3	M3 Expressive
Navigation item layout	Vertical (default)	Available	Available
Navigation item layout	Horizontal	--	Available

Tokens & specs

Use the table's menu to switch between token sets for the navigation bar and the nav items. Learn about design tokens

Design tokens

Token table

Machine-readable relationship table

Navigation bar tokens · 3 token sets · 33 tokens · live token table · DSDB TOKEN_TABLE.52865380210a9b69

• Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Nav bar - Common · md.comp.nav-bar · 23 tokens

Common tokens for navigation bars.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Color › Hovered	md.comp.nav-bar.item.active.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Color › Hovered	md.comp.nav-bar.item.inactive.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Hovered	md.comp.nav-bar.item.active.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Focused	md.comp.nav-bar.item.active.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Color › Focused	md.comp.nav-bar.item.inactive.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Focused	md.comp.nav-bar.item.active.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Pressed	md.comp.nav-bar.item.active.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Color › Pressed	md.comp.nav-bar.item.inactive.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Pressed	md.comp.nav-bar.item.active.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Enabled	md.comp.nav-bar.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Color › Enabled	md.comp.nav-bar.container.color	Color	md.sys.color.surface-container → md.ref.palette.neutral94	#F3EDF7	Dark: #211F26 via md.ref.palette.neutral12
Color › Enabled	md.comp.nav-bar.item.active.indicator.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Color › Enabled	md.comp.nav-bar.item.active.label-text.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Color › Enabled	md.comp.nav-bar.item.inactive.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Color › Enabled	md.comp.nav-bar.item.active.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Enabled	md.comp.nav-bar.item.inactive.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Color › Enabled	md.comp.nav-bar.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Nav item	md.comp.nav-bar.item.between-space	Length	md.sys.measurement.space0	0dp	—
Nav item	md.comp.nav-bar.item.active-indicator.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Nav item	md.comp.nav-bar.item.active-indicator.icon-label-space	Length	—	4dp	—
Nav item	md.comp.nav-bar.item.icon.size	Length	—	24dp	—
Container	md.comp.nav-bar.container.height	Length	—	64dp	—
Container	md.comp.nav-bar.container.shape	Shape	md.sys.shape.corner.none	Rounded corners 0dp	—

Nav bar - Item - Vertical · md.comp.nav-bar.item.vertical · 5 tokens

For vertical nav items, where elements are stacked.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.nav-bar.item.vertical.label-text.font	Typography	md.sys.typescale.label-medium → composite font names: md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.label-medium.size line height: md.sys.typescale.label-medium.line-height font tracking: md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
All tokens	md.comp.nav-bar.item.vertical.active-indicator.height	Length	—	32dp	—
All tokens	md.comp.nav-bar.item.vertical.active-indicator.width	Length	—	56dp	—
All tokens	md.comp.nav-bar.item.vertical.container.between-space	Length	md.sys.measurement.space75	6dp	—
All tokens	md.comp.nav-bar.item.vertical.active-indicator.icon-label-space	Length	md.sys.measurement.space50	4dp	—

Nav bar - Item - Horizontal · md.comp.nav-bar.item.horizontal · 5 tokens

For horizontal nav items, where elements are side-by-side.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.nav-bar.item.horizontal.label-text.font	Typography	md.sys.typescale.label-medium → composite font names: md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.label-medium.size line height: md.sys.typescale.label-medium.line-height font tracking: md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.height	Length	—	40dp	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.leading-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.trailing-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space	Length	md.sys.measurement.space50	4dp	—

Anatomy

1. Container
2. Icon
3. Label text
4. Active indicator
5. Small badge (optional)
6. Large badge (optional)
7. Large badge label

Color

Color values are implemented through design tokens. For designers, this means working with color values that correspond with tokens; in implementation, a color value will be a token that references a value. Learn more about design tokens

Navigation bar color roles used for light and dark schemes:

1. Surface container
2. On-secondary container
3. Secondary
4. Secondary container
5. On-surface variant
6. On-surface variant

For badge color roles, go to badge specs.

States

States are visual representations used to communicate the status of a component or an interactive element.

1. Enabled
2. Hovered (8% state layer)
3. Focused (10% state layer)
4. Pressed (10% state layer)

Measurements

The navigation bar stretches the full window width.

Navigation bar padding and size measurements

Vertical navigation items dynamically change width to equally fit the container. Horizontal navigation items have a fixed width, so extra space is added to the ends of the navigation bar instead.

Navigation bar width and margins for compact and medium windows.

1. Vertical navigation item
2. Margin from window edge
3. Horizontal navigation item

---

Baseline navigation bar

1. Container
2. Icon
3. Label text
4. Active indicator
5. Small badge
6. Large badge
7. Large badge label

Tokens & specs

These tokens are for the baseline navigation bar.

Design tokens

Token table

Machine-readable relationship table

Navigation bar tokens · 4 token sets · 85 tokens · live token table · DSDB TOKEN_TABLE.52865380210a9b69

• Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
• Not configurable here (group default used): Motion scheme: Standard · Language height: Small
• Other contexts: Theme: Dark · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
• Reference chain: aliases from the token to its source value (token → alias → … → value). "—" means the token holds a literal value.

Navigation bar (baseline) · md.comp.navigation-bar · 52 tokens

For baseline navigation bar. For expressive, use `md.comp.nav-bar` and corresponding `.item` token sets instead.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Enabled › Focus indicator	md.comp.navigation-bar.focus.indicator.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Enabled › Focus indicator	md.comp.navigation-bar.focus.indicator.thickness	Length	md.sys.state.focus-indicator.thickness	3dp	—
Enabled › Focus indicator	md.comp.navigation-bar.focus.indicator.outline.offset	Length	md.sys.state.focus-indicator.inner-offset	-3dp	—
Enabled › Container	md.comp.navigation-bar.container.color	Color	md.sys.color.surface-container → md.ref.palette.neutral94	#F3EDF7	Dark: #211F26 via md.ref.palette.neutral12
Enabled › Container	md.comp.navigation-bar.container.shape	Shape	md.sys.shape.corner.none	Rounded corners 0dp	—
Enabled › Container	md.comp.navigation-bar.container.height	Length	—	80dp	—
Enabled › Container	md.comp.navigation-bar.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Enabled › Container	md.comp.navigation-bar.container.surface-tint-layer.color (deprecated)	Color	md.sys.color.surface-tint → md.sys.color.primary → md.ref.palette.primary40	#6750A4	Dark: #D0BCFF via md.ref.palette.primary80 Medium contrast: #4F378B via md.ref.palette.primary30 High contrast: #381E72 via md.ref.palette.primary20
Enabled › Container	md.comp.navigation-bar.container.shadow-color (deprecated)	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Enabled › Label text	md.comp.navigation-bar.label-text.font	Font names	md.sys.typescale.label-medium.font → md.ref.typeface.plain	Roboto	—
Enabled › Label text	md.comp.navigation-bar.label-text.line-height	Line height	md.sys.typescale.label-medium.line-height	16pt	—
Enabled › Label text	md.comp.navigation-bar.label-text.size	Font size	md.sys.typescale.label-medium.size	12pt	—
Enabled › Label text	md.comp.navigation-bar.label-text.weight	Font weight	md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium	500	—
Enabled › Label text	md.comp.navigation-bar.active.label-text.weight	Font weight	md.sys.typescale.label-medium.weight.prominent → md.ref.typeface.weight-bold	700	—
Enabled › Label text	md.comp.navigation-bar.label-text.tracking	Font tracking	md.sys.typescale.label-medium.tracking	0.5pt	—
Enabled › Label text	md.comp.navigation-bar.label-text.type	Typography	composite font names: md.comp.navigation-bar.label-text.font → md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.comp.navigation-bar.label-text.weight → md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.comp.navigation-bar.label-text.size → md.sys.typescale.label-medium.size line height: md.comp.navigation-bar.label-text.line-height → md.sys.typescale.label-medium.line-height font tracking: md.comp.navigation-bar.label-text.tracking → md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
Enabled › Label text	md.comp.navigation-bar.active.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.navigation-bar.inactive.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Label text	md.comp.navigation-bar.active.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.navigation-bar.inactive.hover.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.navigation-bar.active.focus.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.navigation-bar.inactive.focus.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.navigation-bar.active.pressed.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Label text	md.comp.navigation-bar.inactive.pressed.label-text.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Icon	md.comp.navigation-bar.icon.size	Length	—	24dp	—
Enabled › Icon	md.comp.navigation-bar.active.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.navigation-bar.inactive.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Enabled › Icon	md.comp.navigation-bar.active.hover.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.navigation-bar.inactive.hover.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Icon	md.comp.navigation-bar.active.focus.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.navigation-bar.inactive.focus.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › Icon	md.comp.navigation-bar.active.pressed.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Enabled › Icon	md.comp.navigation-bar.inactive.pressed.icon.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › [Deprecated] Badge	md.comp.navigation-bar.badge.color (deprecated)	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20
Enabled › [Deprecated] Badge	md.comp.navigation-bar.badge.size (deprecated)	Length	—	6dp	—
Enabled › [Deprecated] Badge	md.comp.navigation-bar.badge.shape (deprecated)	Shape	—	Rounded corners 3dp	—
Enabled › Active indicator	md.comp.navigation-bar.active-indicator.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Enabled › Active indicator	md.comp.navigation-bar.active-indicator.height	Length	—	32dp	—
Enabled › Active indicator	md.comp.navigation-bar.active-indicator.width	Length	—	64dp	—
Enabled › Active indicator	md.comp.navigation-bar.active-indicator.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Enabled › State layer	md.comp.navigation-bar.active.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › State layer	md.comp.navigation-bar.inactive.hover.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › State layer	md.comp.navigation-bar.hover.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Enabled › State layer	md.comp.navigation-bar.active.focus.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › State layer	md.comp.navigation-bar.inactive.focus.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › State layer	md.comp.navigation-bar.focus.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Enabled › State layer	md.comp.navigation-bar.active.pressed.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › State layer	md.comp.navigation-bar.inactive.pressed.state-layer.color	Color	md.sys.color.on-surface → md.ref.palette.neutral10	#1D1B20	Dark: #E6E0E9 via md.ref.palette.neutral90 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0
Enabled › State layer	md.comp.navigation-bar.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Enabled › [Deprecated] Large badge	md.comp.navigation-bar.large-badge.size (deprecated)	Length	—	16dp	—
Enabled › [Deprecated] Large badge	md.comp.navigation-bar.large-badge.shape (deprecated)	Shape	—	Rounded corners 8dp	—
Enabled › [Deprecated] Large badge	md.comp.navigation-bar.large-badge.color (deprecated)	Color	md.sys.color.error → md.ref.palette.error40	#B3261E	Dark: #F2B8B5 via md.ref.palette.error80 Medium contrast: #8C1D18 via md.ref.palette.error30 High contrast: #601410 via md.ref.palette.error20

Nav bar - Common · md.comp.nav-bar · 23 tokens

Common tokens for navigation bars.

Group	Token	Type	Reference chain	Resolved value	Other contexts
Color › Hovered	md.comp.nav-bar.item.active.hovered.state-layer.opacity	Opacity	md.sys.state.hover.state-layer-opacity	0.08	—
Color › Hovered	md.comp.nav-bar.item.inactive.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Hovered	md.comp.nav-bar.item.active.hovered.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Focused	md.comp.nav-bar.item.active.focused.state-layer.opacity	Opacity	md.sys.state.focus.state-layer-opacity	0.1	—
Color › Focused	md.comp.nav-bar.item.inactive.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Focused	md.comp.nav-bar.item.active.focused.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Pressed	md.comp.nav-bar.item.active.pressed.state-layer.opacity	Opacity	md.sys.state.pressed.state-layer-opacity	0.1	—
Color › Pressed	md.comp.nav-bar.item.inactive.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Pressed	md.comp.nav-bar.item.active.pressed.state-layer.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Enabled	md.comp.nav-bar.container.shadow-color	Color	md.sys.color.shadow → md.ref.palette.neutral0	#000000	—
Color › Enabled	md.comp.nav-bar.container.color	Color	md.sys.color.surface-container → md.ref.palette.neutral94	#F3EDF7	Dark: #211F26 via md.ref.palette.neutral12
Color › Enabled	md.comp.nav-bar.item.active.indicator.color	Color	md.sys.color.secondary-container → md.ref.palette.secondary90	#E8DEF8	Dark: #4A4458 via md.ref.palette.secondary30 Medium contrast: #625B71 via md.ref.palette.secondary40 High contrast: #4A4458 via md.ref.palette.secondary30
Color › Enabled	md.comp.nav-bar.item.active.label-text.color	Color	md.sys.color.secondary → md.ref.palette.secondary40	#625B71	Dark: #CCC2DC via md.ref.palette.secondary80 Medium contrast: #4A4458 via md.ref.palette.secondary30 High contrast: #332D41 via md.ref.palette.secondary20
Color › Enabled	md.comp.nav-bar.item.inactive.label-text.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Color › Enabled	md.comp.nav-bar.item.active.icon.color	Color	md.sys.color.on-secondary-container → md.ref.palette.secondary30	#4A4458	Dark: #E8DEF8 via md.ref.palette.secondary90 Medium contrast: #FFFFFF via md.ref.palette.secondary100 High contrast: #FFFFFF via md.ref.palette.secondary100
Color › Enabled	md.comp.nav-bar.item.inactive.icon.color	Color	md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30	#49454F	Dark: #CAC4D0 via md.ref.palette.neutral-variant80 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 High contrast: #000000 via md.ref.palette.neutral-variant0
Color › Enabled	md.comp.nav-bar.container.elevation	Elevation	md.sys.elevation.level2	3dp	—
Nav item	md.comp.nav-bar.item.between-space	Length	md.sys.measurement.space0	0dp	—
Nav item	md.comp.nav-bar.item.active-indicator.shape	Shape	md.sys.shape.corner.full	Circular (fully rounded)	—
Nav item	md.comp.nav-bar.item.active-indicator.icon-label-space	Length	—	4dp	—
Nav item	md.comp.nav-bar.item.icon.size	Length	—	24dp	—
Container	md.comp.nav-bar.container.height	Length	—	64dp	—
Container	md.comp.nav-bar.container.shape	Shape	md.sys.shape.corner.none	Rounded corners 0dp	—

Nav bar - Item - Vertical · md.comp.nav-bar.item.vertical · 5 tokens

For vertical nav items, where elements are stacked.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.nav-bar.item.vertical.label-text.font	Typography	md.sys.typescale.label-medium → composite font names: md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.label-medium.size line height: md.sys.typescale.label-medium.line-height font tracking: md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
All tokens	md.comp.nav-bar.item.vertical.active-indicator.height	Length	—	32dp	—
All tokens	md.comp.nav-bar.item.vertical.active-indicator.width	Length	—	56dp	—
All tokens	md.comp.nav-bar.item.vertical.container.between-space	Length	md.sys.measurement.space75	6dp	—
All tokens	md.comp.nav-bar.item.vertical.active-indicator.icon-label-space	Length	md.sys.measurement.space50	4dp	—

Nav bar - Item - Horizontal · md.comp.nav-bar.item.horizontal · 5 tokens

For horizontal nav items, where elements are side-by-side.

Group	Token	Type	Reference chain	Resolved value	Other contexts
All tokens	md.comp.nav-bar.item.horizontal.label-text.font	Typography	md.sys.typescale.label-medium → composite font names: md.sys.typescale.label-medium.font → md.ref.typeface.plain font weight: md.sys.typescale.label-medium.weight → md.ref.typeface.weight-medium font size: md.sys.typescale.label-medium.size line height: md.sys.typescale.label-medium.line-height font tracking: md.sys.typescale.label-medium.tracking	Roboto · weight 500 · size 12pt · line height 16pt · tracking 0.5pt	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.height	Length	—	40dp	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.leading-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.trailing-space	Length	md.sys.measurement.space200	16dp	—
All tokens	md.comp.nav-bar.item.horizontal.active-indicator.icon-label-space	Length	md.sys.measurement.space50	4dp	—

Color

Color values are implemented through design tokens. For designers, this means working with color values that correspond with tokens; in implementation, a color value will be a token that references a value. Learn more about design tokens

Navigation bar color roles used for light and dark schemes:

1. Surface
2. On secondary container
3. On surface
4. Secondary container
5. On surface variant
6. On surface variant

For badge color roles, go to badge specs.

States

States are visual representations used to communicate the status of a component or an interactive element.

Navigation bar states: 

1. Enabled 
2. Hovered 
3. Focused 
4. Pressed

Measurements

Navigation bar padding and size measurements

Navigation bar target size and margins

Configurations

1. 3 destinations
2. 4 destinations
3. 5 destinations