Navigation bar

Put 3 to 5 destinations of equal importance in a nav.navigation-bar. The destinations stay the same from screen to screen. Mark the current view with aria-current="page" (or active). The bar needs no JavaScript.

The navigation bar switches between the app's top-level views. The app bar is a different component. It names the current page and holds one or two actions. Use the navigation bar in compact and medium windows. A navigation rail also works in medium windows. In wider windows, use an expanded rail instead. If you have more destinations, or they form a hierarchy, split them into peer categories before you use a rail.

Stacked

The default layout puts the icon above the label. Use it in compact windows. The selected destination gets a pill behind the icon and a filled glyph.

<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 for medium windows. The icon and label sit on one row, and the selected pill wraps both.

<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. Its 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):