# Navigation rail

> Switch between UI views on mid-sized devices.

## Anatomy

A `nav.navigation-rail` holds 3–7 destinations plus an optional FAB. Put it in the same place on every screen. Use it in medium, expanded, large, or extra-large windows.

Collapsed is 96dp with the icon above the label. Add `expanded` for 220–360dp, icon and label on one row, and an extended FAB. The menu button toggles that class (`AutoInit()` starts it). On compact windows an expanded rail is modal — a scrim, and Escape or a scrim tap collapses it. Add `modal` to keep that overlay at every breakpoint.

Compact windows that need persistent destinations still use a [navigation bar](/navigation-bar.html.md). A full overlay menu is a [sidenav](/sidenav.html.md).

## Collapsed

Default. 96dp. Icon above the label; the selected pill sits behind the icon. The FAB is icon-only. Offset the rest of the page by `--md-comp-nav-rail-collapsed-width`.

Label Label Label Label Label

```
<nav class="navigation-rail" aria-label="Main">
  <button type="button" aria-label="Menu">
    <span class="material-symbols" aria-hidden="true">menu</span>
  </button>
  <a class="button extra" href="#!">
    <span class="material-symbols" aria-hidden="true">edit</span>
    <span>Label</span>
  </a>
  <a href="/" aria-current="page">
    <span class="material-symbols" aria-hidden="true">star</span>
    Label
  </a>
  <a href="/two" aria-label="Starred, 3 unread">
    <span class="material-symbols" aria-hidden="true">star<span class="badge">3</span></span>
    Label
  </a>
</nav>
```

## Expanded

Add `expanded`. Destinations become a row: icon, then label, with the selected pill around both. The FAB grows into an extended button. Section headings show only in this layout.

Label Label Label

### Section Header

Label Label

```
<nav class="navigation-rail expanded" aria-label="Main">
  …
  <h3>Section Header</h3>
  <a href="/other">
    <span class="material-symbols" aria-hidden="true">star</span>
    Label
  </a>
</nav>
```

```
@media (width >= 600px) {
  body {
    padding-left: var(--md-comp-nav-rail-collapsed-width);
  }
  body:has(.navigation-rail.expanded) {
    padding-left: var(--md-comp-nav-rail-expanded-width);
  }
}
```

## Modal

On Compact windows, `expanded` already overlays the page with a scrim. Add `modal` if you want that overlay on tablets and desktops too — image 2 in the spec, a compact window expanding in place.

```
<nav class="navigation-rail expanded modal" aria-label="Main">…</nav>
```

## Tokens

| Token | Default |
| --- | --- |
| `--md-comp-nav-rail-collapsed-width` | 96px |
| `--md-comp-nav-rail-expanded-width` | 280px (clamped 220–360) |
| `--md-comp-nav-rail-icon-size` | 24px |
| `--md-comp-nav-rail-indicator-width` | 56px |
| `--md-comp-nav-rail-fab-size` | 56px |