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. A full overlay menu is a sidenav.
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.
<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.
<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 |