---
url: /components/navigation-rail/overview.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** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Navigation rail](/assets/8152bf64-mrols341-nav-rail.BZ2jtef7.webp)

* Use navigation rails in medium, expanded, large, or extra-large window sizes
* Can contain 3-7 destinations plus an optional FAB
* Always put the rail in the same place, even on different screens of an app

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Fmbs2h57x-GM3_Expressive_Nav-Rail_Overview_01_IA_v02.mp4?alt=media" aria-label="Navigation rail with 4 destinations, 1 active, and FAB."></video>

Collapsed and expanded navigation rails can transition between each other on any device, including:


1\. Large or medium window size classes like tablets<br>2. Compact window size classes like phones in portrait orientation

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/NavigationRail-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/navigation-rail) | Available |
| Implementation | [Jetpack Compose: Expressive](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#NavigationRail\(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1\)) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationRail.md) | Available |
| Implementation | [Android Views (MDC-Android): Expressive](https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationRail.md) | Available |
| Implementation | Web | Unavailable |
| Implementation | Web: Expressive | Unavailable |

## M3 Expressive update

**May 2025**

A **collapsed** and **expanded** navigation rail have been introduced to replace the baseline nav rail. The expanded nav rail is meant to replace the [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."). [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

Variants and naming:

* The baseline **navigation rail** is no longer recommended

* Added two wider navigation rails:

  * **Collapsed:** replaces baseline nav rail
  * **Expanded**: replaces [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.")

Configurations:

* Expanded rail modality:

  * Non-modal
  * Modal

* Expanded behavior:

  * Transition to collapsed navigation rail
  * Hide when collapsed

* Color:

  * Active label on vertical items changed from **on surface variant** to **secondary&#xA0;**

![A collapsed and expanded navigation rail.](/assets/5faf0abf-m0fsz2c4-2.CEhf8qvy.webp)

The collapsed and expanded navigation rails match visually and can transition into each other

## Differences from M2

* Behavior: Predictive back interaction
* Color: New color mappings and compatibility with dynamic color
* States: The active destination can be indicated with a pill shape in a contrasting color

![M2 navigation rail with 1 colored and filled icon showing the active state and 3 inactive icons.](/assets/071320ea-m0dtdapc-3.BRw5GDff.webp)

M2: The navigation rail uses icon color, weight, and fill to communicate which destination is active

![M3 navigation rail with 1 icon surrounded by a pill shape in contrasting color to show the active state.](/assets/622b088e-m0fszcgl-4.D6M2_Y3v.webp)

M3: The navigation rail uses a pill-shaped active indicator to communicate which destination is active