Components · Navigation rail

Navigation rail

Top-level destinations kept in view beside the content, each an icon above its own label.

Anatomy

1 .navigation-rail-root The strip holding every destination.
2 .navigation-rail-item One destination: its icon, its label, and its current-page indicator.
3 .navigation-rail-icon The destination's glyph.
4 .navigation-rail-label The destination's name, shown on every item in both orientations.
5 .navigation-rail-indicator Marks which destination is current.

Variants

Vertical The rail itself: a column beside the content.
Horizontal Material's navigation bar arrangement, above or below the content.

Default

When to use

Use a navigation rail for a small set of top-level destinations that should stay visible beside the content, with every destination carrying its own label.