material-app-bar

MD3 Expressive top app bar — three variants. Scroll the inner panels to see container fill and medium/large collapse.

Small (64dp)

Single-row layout. Title Large headline. Optional subtitle Label Medium.

Inbox

Scroll this panel — the bar fills with surface container.

Tall content…

Small with subtitle

Project Atlas Updated 2 minutes ago

Filled trailing icon for the primary edit action.

Tall content…

Medium flexible (112dp → 64dp on scroll)

Headline Medium. Collapses to small when the panel scrolls.

Settings General preferences

Scroll to collapse — height shrinks 112 → 64, headline reverts to Title Large.

Tall content…

Large flexible (120dp → 64dp on scroll)

Display Small typography for emphasised page headlines.

Library 128 saved items

Scroll to compress into the small layout.

Tall content…

Centered alignment (small)

Profile
Tall content…
Sample usage 
<!-- Small -->
<material-app-bar aria-label="Inbox">
  <material-icon-button slot="leading" variant="standard" icon="menu" aria-label="Menu"></material-icon-button>
  <span slot="headline">Inbox</span>
  <material-icon-button slot="trailing" variant="standard" icon="search" aria-label="Search"></material-icon-button>
</material-app-bar>

<!-- Medium with subtitle -->
<material-app-bar variant="medium">
  <material-icon-button slot="leading" variant="standard" icon="arrow_back"></material-icon-button>
  <span slot="headline">Settings</span>
  <span slot="subtitle">General preferences</span>
  <material-icon-button slot="trailing" variant="standard" icon="more_vert"></material-icon-button>
</material-app-bar>

<!-- Large, with custom scroll target (a scrollable container) -->
<material-app-bar variant="large" scroll-target="#main">...</material-app-bar>