---
url: /components/navigation-rail/specs.md
description: >-
  Navigation rails let people switch between UI views on mid-sized devices. They
  can contain 3-7 destinations plus an optional FAB.
---

# Navigation rail

Navigation rails let people switch between UI views on mid-sized devices. They can contain 3-7 destinations plus an optional FAB.

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

## Variants

![2 variants of navigation rails.](/assets/3363be96-mal9f2lt-01-3p.CcFQ9AoK.webp)

1. Collapsed navigation rail
2. Expanded navigation rail

### Baseline variants

The baseline navigation rail is no longer recommended, and should be replaced by the collapsed navigation rail. [View baseline tokens](#d4d97764-20ec-496f-a6f3-0d423940ec5a)

![Baseline navigation rail.](/assets/d67df002-mkvenn9g-02-3p.pzDdC_Rd.webp)

1. The baseline navigation rail is no longer recommended

| Variant                    |     M3    |                      M3 Expressive                     |
| -------------------------- | :-------: | :----------------------------------------------------: |
| Collapsed navigation rail  |     --    |                        Available                       |
| Expanded navigation rail   |     --    |                        Available                       |
| Navigation rail (baseline) | Available | Not recommended.<br>Use **collapsed navigation rail**. |

## Configurations

![Standard and modal layouts of navigation rail.](/assets/3c45a427-mal9fbzs-03-3p.CKIYxbBz.webp)

1. Expanded layout: standard
2. Expanded layout: modal

| Category          |    Configuration    |                                                                                                    M3                                                                                                    | M3 Expressive |
| ----------------- | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------: |
| Expanded layout   |  Standard (default) | Available as [navigation drawer](../navigation-drawer/overview.md "Navigation drawers let people switch between UI views on larger devices. In the expressive update, use an expanded navigation rail.") |   Available   |
| Expanded layout   |        Modal        | Available as [navigation drawer](../navigation-drawer/overview.md "Navigation drawers let people switch between UI views on larger devices. In the expressive update, use an expanded navigation rail.") |   Available   |
| Expanded behavior | Hide when collapsed |                                                                                                    --                                                                                                    |   Available   |

## Tokens & specs

Browse the component elements, attributes, tokens, and their values. [Learn about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-5b55bd7cc1ea6e29-6ef10717
**Navigation rail tokens** · 6 token sets · 53 tokens · [live token table](https://m3.material.io/components/navigation-rail/specs) · DSDB `TOKEN_TABLE.5b55bd7cc1ea6e29`

* 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 rail - Common** · `md.comp.nav-rail` · 14 tokens

Common tokens for nav rail.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled | `md.comp.nav-rail.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` |
| Enabled | `md.comp.nav-rail.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` |
| Enabled | `md.comp.nav-rail.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` |
| Enabled | `md.comp.nav-rail.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` |
| Enabled | `md.comp.nav-rail.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` |
| Hovered | `md.comp.nav-rail.item.active.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered | `md.comp.nav-rail.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` |
| Hovered | `md.comp.nav-rail.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` |
| Focused | `md.comp.nav-rail.item.active.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused | `md.comp.nav-rail.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` |
| Focused | `md.comp.nav-rail.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` |
| Pressed | `md.comp.nav-rail.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` |
| Pressed | `md.comp.nav-rail.item.active.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed | `md.comp.nav-rail.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` |

**Nav rail - Collapsed** · `md.comp.nav-rail.collapsed` · 7 tokens

For collapsed nav rail.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.collapsed.container.width` | Length | — | `96dp` | — |
| All tokens | `md.comp.nav-rail.collapsed.narrow.container.width` | Length | — | `80dp` | — |
| All tokens | `md.comp.nav-rail.collapsed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| All tokens | `md.comp.nav-rail.collapsed.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| All tokens | `md.comp.nav-rail.collapsed.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| All tokens | `md.comp.nav-rail.collapsed.item.vertical-space` | Length | `md.sys.measurement.space50` | `4dp` | — |
| All tokens | `md.comp.nav-rail.collapsed.top-space` | Length | — | `44dp` | — |

**Nav rail - Expanded** · `md.comp.nav-rail.expanded` · 11 tokens

For expanded nav rail.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.expanded.container.width.minimum` | Length | — | `220dp` | — |
| All tokens | `md.comp.nav-rail.expanded.container.width.maximum` | Length | — | `360dp` | — |
| All tokens | `md.comp.nav-rail.expanded.top-space` | Length | — | `44dp` | — |
| All tokens | `md.comp.nav-rail.expanded.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` | — |
| All tokens | `md.comp.nav-rail.expanded.modal.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` | — |
| All tokens | `md.comp.nav-rail.expanded.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| All tokens | `md.comp.nav-rail.expanded.modal.container.color` | Color | `md.sys.color.surface-container` → `md.ref.palette.neutral94` | `#F3EDF7` | Dark: `#211F26` via `md.ref.palette.neutral12` |
| All tokens | `md.comp.nav-rail.expanded.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| All tokens | `md.comp.nav-rail.expanded.modal.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` | — |
| All tokens | `md.comp.nav-rail.expanded.between-item-space` (deprecated) | Length | — | `0dp` | — |
| All tokens | `md.comp.nav-rail.expanded.vertical.trailing-space` (deprecated) | Length | — | `20dp` | — |

**Nav rail item - Common** · `md.comp.nav-rail.item` · 10 tokens

Common tokens for all nav items.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.item.icon.size` | Length | — | `24dp` | — |
| All tokens | `md.comp.nav-rail.item.active-indicator.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| All tokens | `md.comp.nav-rail.item.active-indicator.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| All tokens | `md.comp.nav-rail.item.active-indicator.icon-label-space` | Length | `md.sys.measurement.space100` | `8dp` | — |
| All tokens | `md.comp.nav-rail.item.active-indicator.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| All tokens | `md.comp.nav-rail.item.container.height` | Length | — | `64dp` | — |
| All tokens | `md.comp.nav-rail.item.short.container.height` | Length | — | `56dp` | — |
| All tokens | `md.comp.nav-rail.item.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| All tokens | `md.comp.nav-rail.item.container.vertical-space` | Length | `md.sys.measurement.space75` | `6dp` | — |
| All tokens | `md.comp.nav-rail.item.header-space-minimum` | Length | `md.sys.measurement.space500` | `40dp` | — |

**Nav rail item - Vertical** · `md.comp.nav-rail.item.vertical` · 6 tokens

For vertical nav rail items, where elements are stacked.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.item.vertical.active-indicator.height` | Length | — | `32dp` | — |
| All tokens | `md.comp.nav-rail.item.vertical.active-indicator.width` | Length | — | `56dp` | — |
| All tokens | `md.comp.nav-rail.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-rail.item.vertical.icon-label-space` | Length | `md.sys.measurement.space50` | `4dp` | — |
| All tokens | `md.comp.nav-rail.item.vertical.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| All tokens | `md.comp.nav-rail.item.vertical.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |

**Nav rail item - Horizontal** · `md.comp.nav-rail.item.horizontal` · 5 tokens

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

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.item.horizontal.label-text.font` | Typography | `md.sys.typescale.label-large` → composite<br>font names: `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-large.size`<br>line height: `md.sys.typescale.label-large.line-height`<br>font tracking: `md.sys.typescale.label-large.tracking` | `Roboto · weight 500 · size 14pt · line height 20pt · tracking 0.1pt` | — |
| All tokens | `md.comp.nav-rail.item.horizontal.active-indicator.height` | Length | — | `56dp` | — |
| All tokens | `md.comp.nav-rail.item.horizontal.full-width.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| All tokens | `md.comp.nav-rail.item.horizontal.full-width.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| All tokens | `md.comp.nav-rail.item.horizontal.icon-label-space` | Length | `md.sys.measurement.space100` | `8dp` | — |
:::

## Anatomy

![9 elements of collapsed and expanded navigation rails.](/assets/e167a60e-mg0uznol-04-3p.Dr7Us6ZS.webp)

Collapsed and expanded navigation rail elements:

1. Container
2. Menu (optional)
3. FAB or Extended FAB (optional)
4. Icon
5. Active indicator
6. Label text
7. Large badge (optional)
8. Large badge label (optional)
9. Small badge (optional)

## 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)

![Color roles of 9 elements of collapsed and expanded navigation rails in light and dark color schemes.](/assets/9c85212c-mmyzgq71-05-3p.DGW9uYpA.webp)

Navigation rail color roles used for light and dark schemes:

1. Surface container (optional)
2. On secondary container
3. Secondary container
4. Secondary (vertical), On secondary container (horizontal)
5. On surface variant
6. On surface variant
7. Error
8. On error
9. Error

## States

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or an interactive element.<br><br>The navigation item’s target area always spans the full width of the nav rail, even if the item container hugs its contents.

![4 states of collapsed navigation rails.](/assets/2c435b2f-mal9s5f0-06-3p.DBWuXvNv.webp)

![4 states of expanded navigation rails.](/assets/6cab9cb6-mal9sbiq-07-3p.CVgFiny0.webp)

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

## Measurements

![Padding and measurements for expanded and collapsed navigation rails.](/assets/c930dc4a-mal9t1mb-08-3p.B3Sgs4Km.webp)

Navigation rail padding and size measurements

## Common layouts

![4 common layouts of collapsed navigation rail.](/assets/4c8999b2-mal9twwq-09-3p.2f5Gkpxq.webp)

![4 common layouts of expanded navigation rail.](/assets/2ad7048b-mal9u2w3-10-3p.3MbFG1Ea.webp)

1. Three navigation items 
2. Three navigation items with a menu
3. Three navigation items with a FAB
4. Three navigation items with a menu and FAB

***

<br>

## Baseline navigation rail

![8 elements of baseline navigation rail.](/assets/ff2fade2-mal9uv1q-11-3p.C2ASyq43.webp)

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

<a id="d4d97764-20ec-496f-a6f3-0d423940ec5a"></a>

### Tokens & specs

::: token-table token-table-5b55bd7cc1ea6e29-31a02958
**Navigation rail tokens** · 7 token sets · 124 tokens · [live token table](https://m3.material.io/components/navigation-rail/specs) · DSDB `TOKEN_TABLE.5b55bd7cc1ea6e29`

* Default context: none
* Not configurable here (group default used): Theme: Light · Platform: Android · Audience: 1P Baseline · Motion scheme: Standard · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default · Language height: Small
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Navigation rail (baseline)** · `md.comp.navigation-rail` · 71 tokens

For baseline navigation rails. For expressive, use all nav rail token sets\`md.comp.nav-rail\` and corresponding \`.collapsed\` and \`.item\` token sets.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.navigation-rail.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral100` | `#FFFFFF` |
| Enabled › Container | `md.comp.navigation-rail.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` |
| Enabled › Container | `md.comp.navigation-rail.container.width` | Length | — | `80dp` |
| Enabled › Container | `md.comp.navigation-rail.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.font` | Font names | `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain` | `Google Sans Text` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.line-height` | Line height | `md.sys.typescale.label-medium.line-height` | `16pt` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.size` | Font size | `md.sys.typescale.label-medium.size` | `12pt` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.weight` | Font weight | `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium` | `500` |
| Enabled › Label text | `md.comp.navigation-rail.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-rail.label-text.tracking` | Font tracking | `md.sys.typescale.label-medium.tracking` | `0.1pt` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.type` | Typography | composite<br>font names: `md.comp.navigation-rail.label-text.font` → `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.navigation-rail.label-text.weight` → `md.sys.typescale.label-medium.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.navigation-rail.label-text.size` → `md.sys.typescale.label-medium.size`<br>line height: `md.comp.navigation-rail.label-text.line-height` → `md.sys.typescale.label-medium.line-height`<br>font tracking: `md.comp.navigation-rail.label-text.tracking` → `md.sys.typescale.label-medium.tracking` | `Google Sans Text · weight 500 · size 12pt · line height 16pt · tracking 0.1pt` |
| Enabled › Label text | `md.comp.navigation-rail.active.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Enabled › Label text | `md.comp.navigation-rail.inactive.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#444746` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.font-family` (deprecated) | Font names | `md.sys.typescale.label-medium.font` → `md.ref.typeface.plain` | `Google Sans Text` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.font-size` (deprecated) | Font size | `md.sys.typescale.label-medium.size` | `12pt` |
| Enabled › Label text | `md.comp.navigation-rail.label-text.letter-spacing` (deprecated) | Font tracking | `md.sys.typescale.label-medium.tracking` | `0.1pt` |
| Enabled › Icon | `md.comp.navigation-rail.icon.size` | Length | — | `24dp` |
| Enabled › Icon | `md.comp.navigation-rail.active.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Enabled › Icon | `md.comp.navigation-rail.inactive.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#444746` |
| Enabled › Icon | `md.comp.navigation-rail.menu.icon.color` (deprecated) | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#444746` |
| Enabled › Icon | `md.comp.navigation-rail.menu.icon.size` (deprecated) | Length | — | `24dp` |
| Enabled › \[Deprecated] Badge | `md.comp.navigation-rail.badge.color` (deprecated) | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` |
| Enabled › \[Deprecated] Badge | `md.comp.navigation-rail.badge.size` (deprecated) | Length | — | `6dp` |
| Enabled › \[Deprecated] Badge | `md.comp.navigation-rail.badge.shape` (deprecated) | Shape | — | `Rounded corners 3dp` |
| Enabled › Active indicator | `md.comp.navigation-rail.active-indicator.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#C2E7FF` |
| Enabled › Active indicator | `md.comp.navigation-rail.active-indicator.height` | Length | — | `32dp` |
| Enabled › Active indicator | `md.comp.navigation-rail.no-label.active-indicator.height` | Length | — | `56dp` |
| Enabled › Active indicator | `md.comp.navigation-rail.active-indicator.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| Enabled › Active indicator | `md.comp.navigation-rail.no-label.active-indicator.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| Enabled › Active indicator | `md.comp.navigation-rail.active-indicator.width` | Length | — | `56dp` |
| Enabled › \[Deprecated] Large badge | `md.comp.navigation-rail.large-badge.size` (deprecated) | Length | — | `16dp` |
| Enabled › \[Deprecated] Large badge | `md.comp.navigation-rail.large-badge.shape` (deprecated) | Shape | — | `Rounded corners 8dp` |
| Enabled › \[Deprecated] Large badge | `md.comp.navigation-rail.large-badge.color` (deprecated) | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.font-family` (deprecated) | Font names | `md.sys.typescale.label-small.font` → `md.ref.typeface.plain` | `Google Sans Text` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.font` (deprecated) | Font names | `md.sys.typescale.label-small.font` → `md.ref.typeface.plain` | `Google Sans Text` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.line-height` (deprecated) | Line height | `md.sys.typescale.label-small.line-height` | `16pt` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.size` (deprecated) | Font size | `md.sys.typescale.label-small.size` | `11pt` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.weight` (deprecated) | Font weight | `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium` | `500` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.tracking` (deprecated) | Font tracking | `md.sys.typescale.label-small.tracking` | `0.1pt` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.type` (deprecated) | Typography | composite<br>font names: `md.comp.navigation-rail.large-badge-label.font` → `md.sys.typescale.label-small.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.navigation-rail.large-badge-label.weight` → `md.sys.typescale.label-small.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.comp.navigation-rail.large-badge-label.size` → `md.sys.typescale.label-small.size`<br>line height: `md.comp.navigation-rail.large-badge-label.line-height` → `md.sys.typescale.label-small.line-height`<br>font tracking: `md.comp.navigation-rail.large-badge-label.tracking` → `md.sys.typescale.label-small.tracking` | `Google Sans Text · weight 500 · size 11pt · line height 16pt · tracking 0.1pt` |
| Enabled › \[Deprecated] Large badge label | `md.comp.navigation-rail.large-badge-label.color` (deprecated) | Color | `md.sys.color.on-error` → `md.ref.palette.error100` | `#FFFFFF` |
| Hovered › Label text | `md.comp.navigation-rail.active.hover.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Hovered › Label text | `md.comp.navigation-rail.inactive.hover.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Hovered › State layer | `md.comp.navigation-rail.active.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Hovered › State layer | `md.comp.navigation-rail.inactive.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Hovered › State layer | `md.comp.navigation-rail.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` |
| Hovered › State layer | `md.comp.navigation-rail.menu.hover.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Hovered › State layer | `md.comp.navigation-rail.menu.hover.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` |
| Hovered › Icon | `md.comp.navigation-rail.active.hover.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Hovered › Icon | `md.comp.navigation-rail.inactive.hover.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Hovered › Icon | `md.comp.navigation-rail.menu.hover.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › Label text | `md.comp.navigation-rail.active.focus.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › Label text | `md.comp.navigation-rail.inactive.focus.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › State layer | `md.comp.navigation-rail.active.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › State layer | `md.comp.navigation-rail.inactive.focus.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › State layer | `md.comp.navigation-rail.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` |
| Focused › State layer | `md.comp.navigation-rail.menu.focus.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › State layer | `md.comp.navigation-rail.menu.focus.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` |
| Focused › Icon | `md.comp.navigation-rail.active.focus.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Focused › Icon | `md.comp.navigation-rail.inactive.focus.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Focused › Icon | `md.comp.navigation-rail.menu.focus.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › Label text | `md.comp.navigation-rail.active.pressed.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › Label text | `md.comp.navigation-rail.inactive.pressed.label-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › State layer | `md.comp.navigation-rail.active.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › State layer | `md.comp.navigation-rail.inactive.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › State layer | `md.comp.navigation-rail.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` |
| Pressed (ripple) › State layer | `md.comp.navigation-rail.menu.pressed.state-layer.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › State layer | `md.comp.navigation-rail.menu.pressed.state-layer.opacity` (deprecated) | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` |
| Pressed (ripple) › Icon | `md.comp.navigation-rail.active.pressed.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Pressed (ripple) › Icon | `md.comp.navigation-rail.inactive.pressed.icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |
| Pressed (ripple) › Icon | `md.comp.navigation-rail.menu.pressed.icon.color` (deprecated) | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1F1F1F` |

**Nav rail item - Horizontal** · `md.comp.nav-rail.item.horizontal` · 5 tokens

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

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.item.horizontal.label-text.font` | Typography | `md.sys.typescale.label-large` → composite<br>font names: `md.sys.typescale.label-large.font` → `md.ref.typeface.plain`<br>font weight: `md.sys.typescale.label-large.weight` → `md.ref.typeface.weight-medium`<br>font size: `md.sys.typescale.label-large.size`<br>line height: `md.sys.typescale.label-large.line-height`<br>font tracking: `md.sys.typescale.label-large.tracking` | `Google Sans Text · weight 500 · size 14pt · line height 20pt · tracking 0pt` |
| All tokens | `md.comp.nav-rail.item.horizontal.active-indicator.height` | Length | — | `56dp` |
| All tokens | `md.comp.nav-rail.item.horizontal.full-width.leading-space` | Length | `md.sys.measurement.space200` | `16dp` |
| All tokens | `md.comp.nav-rail.item.horizontal.full-width.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` |
| All tokens | `md.comp.nav-rail.item.horizontal.icon-label-space` | Length | `md.sys.measurement.space100` | `8dp` |

**Nav rail item - Common** · `md.comp.nav-rail.item` · 10 tokens

Common tokens for all nav items.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.item.icon.size` | Length | — | `24dp` |
| All tokens | `md.comp.nav-rail.item.active-indicator.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` |
| All tokens | `md.comp.nav-rail.item.active-indicator.leading-space` | Length | `md.sys.measurement.space200` | `16dp` |
| All tokens | `md.comp.nav-rail.item.active-indicator.icon-label-space` | Length | `md.sys.measurement.space100` | `8dp` |
| All tokens | `md.comp.nav-rail.item.active-indicator.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` |
| All tokens | `md.comp.nav-rail.item.container.height` | Length | — | `64dp` |
| All tokens | `md.comp.nav-rail.item.short.container.height` | Length | — | `56dp` |
| All tokens | `md.comp.nav-rail.item.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` |
| All tokens | `md.comp.nav-rail.item.container.vertical-space` | Length | `md.sys.measurement.space75` | `6dp` |
| All tokens | `md.comp.nav-rail.item.header-space-minimum` | Length | `md.sys.measurement.space500` | `40dp` |

**Nav rail - Common** · `md.comp.nav-rail` · 14 tokens

Common tokens for nav rail.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| Enabled | `md.comp.nav-rail.item.active.label-text.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#00639B` |
| Enabled | `md.comp.nav-rail.item.inactive.label-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#444746` |
| Enabled | `md.comp.nav-rail.item.active.icon.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Enabled | `md.comp.nav-rail.item.inactive.icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#444746` |
| Enabled | `md.comp.nav-rail.item.active.indicator.color` | Color | `md.sys.color.secondary-container` → `md.ref.palette.secondary90` | `#C2E7FF` |
| Hovered | `md.comp.nav-rail.item.active.hovered.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` |
| Hovered | `md.comp.nav-rail.item.inactive.hovered.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Hovered | `md.comp.nav-rail.item.active.hovered.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Focused | `md.comp.nav-rail.item.active.focused.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` |
| Focused | `md.comp.nav-rail.item.inactive.focused.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Focused | `md.comp.nav-rail.item.active.focused.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Pressed | `md.comp.nav-rail.item.active.pressed.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |
| Pressed | `md.comp.nav-rail.item.active.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` |
| Pressed | `md.comp.nav-rail.item.inactive.pressed.state-layer.color` | Color | `md.sys.color.on-secondary-container` → `md.ref.palette.secondary30` | `#004A77` |

**Nav rail - Collapsed** · `md.comp.nav-rail.collapsed` · 7 tokens

For collapsed nav rail.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.collapsed.container.width` | Length | — | `96dp` |
| All tokens | `md.comp.nav-rail.collapsed.narrow.container.width` | Length | — | `80dp` |
| All tokens | `md.comp.nav-rail.collapsed.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` |
| All tokens | `md.comp.nav-rail.collapsed.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` |
| All tokens | `md.comp.nav-rail.collapsed.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral100` | `#FFFFFF` |
| All tokens | `md.comp.nav-rail.collapsed.item.vertical-space` | Length | `md.sys.measurement.space50` | `4dp` |
| All tokens | `md.comp.nav-rail.collapsed.top-space` | Length | — | `44dp` |

**Nav rail - Expanded** · `md.comp.nav-rail.expanded` · 11 tokens

For expanded nav rail.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.expanded.container.width.minimum` | Length | — | `220dp` |
| All tokens | `md.comp.nav-rail.expanded.container.width.maximum` | Length | — | `360dp` |
| All tokens | `md.comp.nav-rail.expanded.top-space` | Length | — | `44dp` |
| All tokens | `md.comp.nav-rail.expanded.container.elevation` | Elevation | `md.sys.elevation.level0` | `0dp` |
| All tokens | `md.comp.nav-rail.expanded.modal.container.elevation` | Elevation | `md.sys.elevation.level2` | `3dp` |
| All tokens | `md.comp.nav-rail.expanded.container.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral100` | `#FFFFFF` |
| All tokens | `md.comp.nav-rail.expanded.modal.container.color` | Color | `md.sys.color.surface-container` | `#F0F4F9` |
| All tokens | `md.comp.nav-rail.expanded.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` |
| All tokens | `md.comp.nav-rail.expanded.modal.container.shape` | Shape | `md.sys.shape.corner.large` | `Rounded corners 16dp` |
| All tokens | `md.comp.nav-rail.expanded.between-item-space` (deprecated) | Length | — | `0dp` |
| All tokens | `md.comp.nav-rail.expanded.vertical.trailing-space` (deprecated) | Length | — | `20dp` |

**Nav rail item - Vertical** · `md.comp.nav-rail.item.vertical` · 6 tokens

For vertical nav rail items, where elements are stacked.

| Group | Token | Type | Reference chain | Resolved value |
| --- | --- | --- | --- | --- |
| All tokens | `md.comp.nav-rail.item.vertical.active-indicator.height` | Length | — | `32dp` |
| All tokens | `md.comp.nav-rail.item.vertical.active-indicator.width` | Length | — | `56dp` |
| All tokens | `md.comp.nav-rail.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` | `Google Sans Text · weight 500 · size 12pt · line height 16pt · tracking 0.1pt` |
| All tokens | `md.comp.nav-rail.item.vertical.icon-label-space` | Length | `md.sys.measurement.space50` | `4dp` |
| All tokens | `md.comp.nav-rail.item.vertical.leading-space` | Length | `md.sys.measurement.space200` | `16dp` |
| All tokens | `md.comp.nav-rail.item.vertical.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` |
:::

### Color

Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

![8 color roles of baseline navigation rail.](/assets/c0fa4d5d-mal9vzs8-12-3p.BwfD1DIq.webp)

Navigation rail color roles used for light and dark themes:

1. On secondary container
2. Secondary container
3. On surface
4. On surface variant
5. On surface variant
6. Error
7. On error
8. Error

### States

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

![8 states of baseline navigation rail.](/assets/f0aab986-mal9x9ol-13-3p.EJqlZf5l.webp)

Navigation rail states:

1. Enabled (on active destination)
2. Hovered (on active destination)
3. Focused (on active destination)
4. Pressed (on active destination)
5. Enabled (on inactive destination)
6. Hovered (on inactive destination)
7. Focused (on inactive destination)
8. Pressed (on inactive destination)

### Measurements

![Baseline nav rail size measurements.](/assets/a90849bc-mal9xiu7-14-3p.DDzuRfYI.webp)

Navigation rail size measurements

![Baseline nav rail padding and margin measurements.](/assets/4ef3d910-mal9xyxt-15-3p.CP6L5Jm3.webp)

Navigation rail padding and margin measurements

### Configurations

Common arrangements of elements within a navigation rail.

![5 configurations of the baseline navigation rail.](/assets/36fe2f0c-mal9yote-16-3p.DoEbUKjH.webp)

1. With a menu
2. With a FAB
3. With menu and FAB, without labels
4. All destinations with text labels
5. With menu, FAB, and label text for all destinations