Material 3 App Bar Demo

Top app bars display information and actions related to the current screen according to the Material Design 3 App Bar specification.

1. Small App Bar (Default)

Standard 64px height with left-aligned headline and subtitle

Toggle Scrolled

favorite

more_vert

2. Center-Aligned App Bar

64px height with headline and subtitle centered

Toggle Scrolled

arrow_back

attach_file

more_vert

3. Medium Flexible App Bar

112px–136px expanded height with lower headline, collapses to 64px

Toggle Collapsed

Toggle Scrolled

filter_list

more_vert

4. Large Flexible App Bar

120px–152px expanded height with prominent headline

Toggle Collapsed

Toggle Scrolled

arrow_back

bookmark

more_vert

5. Search App Bar

Full top app bar containing an embedded search input and actions

mic

more_vert

6. Interactive Scroll Collapse (`scroll-behavior="collapse"`)

Scroll the container below to see automatic collapse and elevation changes

refresh

more_vert

Scroll down to see the medium flexible app bar automatically collapse into a small 64px app bar and raise elevation with the container surface color.

Item 1: Material Design 3 Expressive typography and colors.

Item 2: Seamless transitions between expanded and collapsed states.

Item 3: Fully responsive across desktop, tablet, and mobile devices.

Item 4: Accessible keyboard navigation and aria landmarks.

Item 5: Automatic scroll listeners support either the window or custom container selectors.

Item 6: Scroll back up to expand again!