Navigation Bar

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app, typically on mobile devices.

Theme Variables

You can customize the standard height of the navigation bar by overriding its CSS variable.

:root {
  --air-nav-bar-height: calc(var(--spacing) * 20); /* 80px default */
}

Composed Utilities

The following composed utilities automatically handle the layout, fixed positioning, typography, and complex interactive states (hover/focus/active) for the icon containers based on the [aria-selected="true"] attribute.

<!-- Fixed to the bottom of the screen -->
<nav class="navigation-bar">
  
  <!-- Selected Item -->
  <button class="navigation-bar-item" aria-selected="true">
    <div class="nav-icon-container">
      <span class="material-symbols-outlined material-fill">home</span>
    </div>
    <span>Home</span>
  </button>
  
  <!-- Unselected Item -->
  <button class="navigation-bar-item" aria-selected="false">
    <div class="nav-icon-container">
      <span class="material-symbols-outlined">search</span>
    </div>
    <span>Search</span>
  </button>

</nav>

Bar and Item Layout

• navigation-bar: Applied to the main wrapper (<nav>). It fixes the bar to the bottom of the screen (z-fixed), establishes a flex layout that evenly spaces items (justify-evenly), and applies a surface-container background.
• navigation-bar-item: Applied to the interactive elements (e.g., <button> or <a>). It establishes a column flex layout, applies label-medium typography, and uses on-surface-variant text color by default. When the [aria-selected="true"] attribute is present, the text color shifts to on-surface.

Icon Container

• nav-icon-container: Applied to a <div> wrapping the icon. This utility works dynamically with its parent navigation-bar-item to apply Material 3 state layers:
  • Unselected: Transparent background. Hover and focus states apply subtle on-surface-variant color mixes.
  • Selected: Automatically applies a pill-shaped secondary-container background with on-secondary-container icon color when the parent navigation-bar-item has [aria-selected="true"]. Hover and focus states dynamically adapt using on-surface color mixes over the secondary container.