App Bar

A top app bar for page-level navigation and actions.

Usage

The top app bar provides content and actions related to the current screen. Use the leading slot for a navigation icon, the default slot for the headline, and the trailing slot for action icon buttons.

Page Title


  <div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
    <wc-app-bar>
      <wc-icon-button slot="leading" variant="text">
        <wc-icon name="menu"></wc-icon>
      </wc-icon-button>
      Page Title
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="search"></wc-icon>
      </wc-icon-button>
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="more_vert"></wc-icon>
      </wc-icon-button>
    </wc-app-bar>
  </div>

Variants

Small (default)

A single-row bar with the headline left-aligned. Ideal for top-level screens.

Page Title


  <div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
    <wc-app-bar>
      <wc-icon-button slot="leading" variant="text">
        <wc-icon name="menu"></wc-icon>
      </wc-icon-button>
      Page Title
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="search"></wc-icon>
      </wc-icon-button>
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="more_vert"></wc-icon>
      </wc-icon-button>
    </wc-app-bar>
  </div>

Center-aligned

A single-row bar with the headline centred. Common on detail or secondary screens.

Details


  <div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
    <wc-app-bar variant="center-aligned">
      <wc-icon-button slot="leading" variant="text">
        <wc-icon name="arrow_back"></wc-icon>
      </wc-icon-button>
      Details
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="more_vert"></wc-icon>
      </wc-icon-button>
    </wc-app-bar>
  </div>

Scrolled state

Add the scrolled attribute to show a shadow and apply a tonal surface color, indicating that content has scrolled beneath the bar.

Page Title


  <div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
    <wc-app-bar scrolled="true">
      <wc-icon-button slot="leading" variant="text">
        <wc-icon name="menu"></wc-icon>
      </wc-icon-button>
      Page Title
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="search"></wc-icon>
      </wc-icon-button>
    </wc-app-bar>
  </div>

Sizes

Medium

A two-row bar (112dp total) where the headline sits in a second row below the action row. Suitable for screens with rich context, such as article or inbox views.

Medium Headline


  <div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
    <wc-app-bar variant="medium">
      <wc-icon-button slot="leading" variant="text">
        <wc-icon name="menu"></wc-icon>
      </wc-icon-button>
      Medium Headline
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="search"></wc-icon>
      </wc-icon-button>
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="more_vert"></wc-icon>
      </wc-icon-button>
    </wc-app-bar>
  </div>

Large

A two-row bar (152dp total) with a larger headline (headline-medium type scale). Use for primary screens where the page title deserves strong visual prominence.

Large Headline


  <div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
    <wc-app-bar variant="large">
      <wc-icon-button slot="leading" variant="text">
        <wc-icon name="arrow_back"></wc-icon>
      </wc-icon-button>
      Large Headline
      <wc-icon-button slot="trailing" variant="text">
        <wc-icon name="more_vert"></wc-icon>
      </wc-icon-button>
    </wc-app-bar>
  </div>