# Navigation bar

> Switch between UI views on compact and medium screens.

## Anatomy

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](/navbar.html.md). 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](/navigation-rail.html.md) covers mid-size screens and a [sidenav](/sidenav.html.md) 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.

Home Browse Radio Library

```
<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.

Home Browse Radio Library

```
<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` |