Component reference

Top App Bar

Material 3 Expressive Top App Bar component with multiple size variants and scroll behaviors.

Material 3Web ComponentFramework agnostic

Small (Default)

menu My App

more_vert

<m3-top-app-bar>
  <m3-icon-button slot="navigation-icon" aria-label="Menu"><span class="material-symbols-outlined">menu</span></m3-icon-button>
  My App
  <span slot="actions">
    <m3-icon-button aria-label="Search"><span class="material-symbols-outlined">search</span></m3-icon-button>
  </span>
</m3-top-app-bar>

Center-Aligned

arrow_back Page Title

<m3-top-app-bar variant="center-aligned">
  <m3-icon-button slot="navigation-icon" aria-label="Back"><span class="material-symbols-outlined">arrow_back</span></m3-icon-button>
  Page Title
</m3-top-app-bar>

Medium

menu Headline

<m3-top-app-bar variant="medium">
  <m3-icon-button slot="navigation-icon" aria-label="Menu"><span class="material-symbols-outlined">menu</span></m3-icon-button>
  Headline
</m3-top-app-bar>

Large

menu Large Headline

<m3-top-app-bar variant="large">
  <m3-icon-button slot="navigation-icon" aria-label="Menu"><span class="material-symbols-outlined">menu</span></m3-icon-button>
  Large Headline
</m3-top-app-bar>