---
url: /components/navigation-bar/specs.md
description: >-
  Navigation bars let people switch between UI views on smaller devices. They’re
  a common navigation component on handheld screens.
---

# Navigation bar

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

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

![The recommended flexible navigation bar.](/assets/82a05884-ma3onczd-01.BzmP85Kk.webp)

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](#46dc2521-acf0-44e3-bbc0-78dc225b9749)

![1 baseline navigation bar.](/assets/c466486a-mkq5ef63-02-3p.uwzrUbBY.webp)

1. Navigation bar (not recommended)

| Variant                 |     M3    |                     M3 Expressive                    |
| ----------------------- | :-------: | :--------------------------------------------------: |
| Flexible navigation bar |     --    |                       Available                      |
| Navigation bar          | Available | Not recommended.<br>Use **flexible navigation bar**. |

## Configurations

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

![Two size configurations for navigation bar and items.](/assets/e5908766-ma3oovxg-7.Dd_yNdel.webp)

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. [](#3425f33a-0b11-492a-ae5a-40d63f939384)[Learn about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-52865380210a9b69-1049c393
**Navigation bar tokens** · 3 token sets · 33 tokens · [live token table](https://m3.material.io/components/navigation-bar/specs) · 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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-medium.size`<br>line height: `md.sys.typescale.label-medium.line-height`<br>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<br>font names: `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-medium.size`<br>line height: `md.sys.typescale.label-medium.line-height`<br>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

![Seven elements of the navigation bar.](/assets/1804fb4f-ma3opmda-1.DTTPJpTh.webp)

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](../../foundations/design-tokens/overview.md)

![Six color roles of the navigation bar.](/assets/ace7fee3-ma3oqa88-05.cNirIqNs.webp)

Navigation bar color roles used for light and dark schemes:<br>

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](../badges/specs.md).

## States

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

![Four states of the navigation bar items.](/assets/b0699590-mah8b097-3.h2srwfYg.webp)

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.](/assets/b92ec840-ma3ovtkk-5.BrZR3HeZ.webp)

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 and item widths.](/assets/c4eeacae-ma3owffv-6.DEqipug0.webp)

Navigation bar width and margins for compact and medium windows.<br>

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

***

<br>

<a id="46dc2521-acf0-44e3-bbc0-78dc225b9749"></a>

## Baseline navigation bar

![7 elements of baseline navigation bar.](/assets/9cc69e64-ma3ox4jl-3p_nav-bar_anatomy.C6t3LHvZ.webp)

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

<a id="3425f33a-0b11-492a-ae5a-40d63f939384"></a>

### Tokens & specs

These tokens are for the baseline navigation bar.

::: token-table token-table-52865380210a9b69-8a9bb67d
**Navigation bar tokens** · 4 token sets · 85 tokens · [live token table](https://m3.material.io/components/navigation-bar/specs) · 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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>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<br>font names: `md.comp.navigation-bar.label-text.font` → `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.navigation-bar.label-text.weight` → `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.navigation-bar.label-text.size` → `md.sys.typescale.label-medium.size`<br>line height: `md.comp.navigation-bar.label-text.line-height` → `md.sys.typescale.label-medium.line-height`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>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`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#625B71` via `md.ref.palette.secondary40`<br>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`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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`<br>Medium contrast: `#FFFFFF` via `md.ref.palette.secondary100`<br>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`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>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<br>font names: `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-medium.size`<br>line height: `md.sys.typescale.label-medium.line-height`<br>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<br>font names: `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-medium.size`<br>line height: `md.sys.typescale.label-medium.line-height`<br>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](../../foundations/design-tokens/overview.md)

![6 color roles of baseline navigation bar.](/assets/80dea178-ma3oxof4-3p_nav-bar_color.BEPU1Z76.webp)

Navigation bar color roles used for light and dark schemes:<br>

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](../badges/specs.md).

### States

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

![4 states of baseline navigation bar.](/assets/f9ae79cf-mamkex4k-11-3p.DAwJ_lr6.webp)

Navigation bar states: <br>

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

## Measurements

![Baseline navigation bar padding and size measurements.](/assets/f3ad886e-mamkf93e-12-3p.CFv-y8LI.webp)

Navigation bar padding and size measurements

![Baseline navigation bar target size and margins.](/assets/c85825c3-mamkhglx-13-3p.Cr-Bu8s1.webp)

Navigation bar target size and margins

## Configurations

![3 configurations of the baseline navigation bar.](/assets/1bd96772-ma3ozytu-3p_nav-bar_config.CSnP3_GM.webp)

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