Top app bar

Top app bars (COMPONENT_SPEC §11): small (Compose TopAppBar), center-aligned (CenterAlignedTopAppBar), medium and large flexible (MediumFlexibleTopAppBar, LargeFlexibleTopAppBar) and two-rows (TwoRowsTopAppBar). Plain HTML with m3e-css classes; the scroll behaviors come from attachTopAppBarScroll (m3e-elements) or <TopAppBar scrollBehavior> (m3e-react). The page decides positioning, such as position: sticky.

Small and center-aligned

Title only

Navigation and actions

With subtitle

Subtitle

Scrolled (data-scrolled)

Centered

Centered with subtitle

Subtitle

Medium and large flexible, two-rows

Expanded (no scroll behavior). The top row holds the collapsed title, shown as the bar collapses; the expanded title sits in the second row, its last baseline 24dp (medium) or 28dp (large) above the bottom, moved up when it does not fit. Two-rows bars take custom heights and per-row titles (here Compose's CustomTwoRowsTopAppBar: 64 / 156dp).

Medium flexible

Medium flexible

Subtitle

Medium, centered

Subtitle

Large flexible

Large flexible

Subtitle

Large, centered

Subtitle

Expanded title

Expanded subtitle

Scroll behaviors

Pinned: the single-row container color changes once content scrolls under the bar. Enter-always: the bar hides with the scroll and returns on any scroll up. Exit-until-collapsed (the flexible bars): the expanded row collapses with the scroll down to the small bar's 64dp, the titles crossfade and the container color follows the collapsed fraction; it expands again when the content comes back to its start. A partly collapsed bar snaps open or closed on the default effects spring when scrolling stops.

pinned

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24

enter-always

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24

Medium flexible

Subtitle

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24

Large flexible

Subtitle

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24

Expanded title

Expanded subtitle

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24

React

<TopAppBar variant titleHorizontalAlignment scrollBehavior scrollTarget={ref}>

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): AppBar.kt (TopAppBar, CenterAlignedTopAppBar, MediumFlexibleTopAppBar, LargeFlexibleTopAppBar, TwoRowsTopAppBar, TopAppBarDefaults, TopAppBarState, the scroll behaviors and settleAppBar), AppBarTokens.kt, AppBarSmallTokens.kt, AppBarMediumFlexibleTokens.kt, AppBarLargeFlexibleTokens.kt and the values Compose renders in components/top-app-bar-defaults.css; AppBarSamples.kt for the configurations above.