A nav.navigation-bar holds 3–5 destinations of equal
importance. Destinations do not change from screen to screen.
There is no JavaScript — mark the current view with
aria-current="page" (or active).
This is not the app bar. The app bar names the current page and holds 1–2 actions. The navigation bar switches between the app’s top-level views. Use it in compact and medium windows; a navigation rail covers mid-size screens and a sidenav the rest.
Stacked
Default. Icon above the label. The selected destination puts a pill behind the icon and fills the glyph. Use this in compact windows.
<nav class="navigation-bar" aria-label="Main">
<a href="/" aria-current="page">
<span class="material-symbols" aria-hidden="true">home</span>
Home
</a>
<a href="/browse">
<span class="material-symbols" aria-hidden="true">explore</span>
Browse
</a>
<a href="/radio">
<span class="material-symbols" aria-hidden="true">radio</span>
Radio
</a>
<a href="/library">
<span class="material-symbols" aria-hidden="true">library_music</span>
Library
</a>
</nav>Horizontal
Add horizontal. Icon and label sit on one row, and
the selected pill wraps both. Use this in medium windows.
<nav class="navigation-bar horizontal" aria-label="Main">
<a href="/" aria-current="page">
<span class="material-symbols" aria-hidden="true">home</span>
Home
</a>
…
</nav>Fixed
Add fixed to stick the bar to the bottom of the
viewport. Padding includes safe-area-inset-bottom
so the destinations clear a home indicator.
<nav class="navigation-bar fixed" aria-label="Main">…</nav>Tokens
Set these on the bar (or on :root):
| Token | Default |
|---|---|
--md-comp-nav-bar-container-color | on-surface 8% on surface |
--md-comp-nav-bar-container-height | 64px |
--md-comp-nav-bar-icon-size | 24px |
--md-comp-nav-bar-indicator-width | 56px |
--md-comp-nav-bar-indicator-height | 32px |
--md-comp-nav-bar-indicator-shape | 16px (100px horizontal) |
--md-comp-nav-bar-active-indicator-color | --md-sys-color-secondary-container |