AppBar

MD3 app bars: TopAppBar (small, plus the Expressive medium and large flexible bars) with built-in scroll behaviors, and BottomAppBar for actions at the bottom of the screen.

Sizes

small is a single 64dp row. medium (112dp) and large (120dp) are the Expressive flexible bars: a 64dp icon row plus a second row holding a HeadlineMedium / DisplaySmall title.

Small

Medium flexible

Large flexible

<TopAppBar
  variant="medium"
  title="Inbox"
  navigationIcon={<IconButton variant="standard" icon={<MenuIcon />} aria-label="Menu" />}
  actions={<IconButton variant="standard" icon={<SearchIcon />} aria-label="Search" />}
/>

Use standard IconButtons in navigationIcon / actions — they pick up the slot colors and sit in 48dp slots.

Subtitle

subtitle adds supporting text under the title; medium / large grow to 136 / 152dp.

Title

Subtitle

Medium title

Subtitle

Large title

Subtitle

<TopAppBar variant="large" title="Large title" subtitle="Subtitle" />

Title alignment

titleAlignment="center" works on every size. A centered title is centered across the full bar width, and only pushed inward when it would collide with the icons.

Centered

Subtitle

<TopAppBar titleAlignment="center" title="Centered" />

Deprecated

variant="center" still works but is deprecated (removed in v2) — use variant="small" titleAlignment="center" instead.

Scroll behavior

scrollBehavior observes scrollTarget (a ref, an element, or the window — default window) and makes the bar position: sticky; top: 0, so place it at the top of the scrolling content. Scroll inside each frame below.

pinned — always visible; switches to the surface-container color once content scrolls under it.
enterAlways — hides while scrolling forward, reappears on scroll back.
exitUntilCollapsed — a medium / large bar collapses to its 64dp row and expands again near the top.

pinned

Paragraph 1. Content scrolls under the app bar.

Paragraph 2. Content scrolls under the app bar.

Paragraph 3. Content scrolls under the app bar.

Paragraph 4. Content scrolls under the app bar.

Paragraph 5. Content scrolls under the app bar.

Paragraph 6. Content scrolls under the app bar.

Paragraph 7. Content scrolls under the app bar.

Paragraph 8. Content scrolls under the app bar.

Paragraph 9. Content scrolls under the app bar.

Paragraph 10. Content scrolls under the app bar.

Paragraph 11. Content scrolls under the app bar.

Paragraph 12. Content scrolls under the app bar.

Paragraph 13. Content scrolls under the app bar.

Paragraph 14. Content scrolls under the app bar.

Paragraph 15. Content scrolls under the app bar.

Paragraph 16. Content scrolls under the app bar.

Paragraph 17. Content scrolls under the app bar.

Paragraph 18. Content scrolls under the app bar.

Paragraph 19. Content scrolls under the app bar.

Paragraph 20. Content scrolls under the app bar.

enterAlways

Paragraph 1. Content scrolls under the app bar.

Paragraph 2. Content scrolls under the app bar.

Paragraph 3. Content scrolls under the app bar.

Paragraph 4. Content scrolls under the app bar.

Paragraph 5. Content scrolls under the app bar.

Paragraph 6. Content scrolls under the app bar.

Paragraph 7. Content scrolls under the app bar.

Paragraph 8. Content scrolls under the app bar.

Paragraph 9. Content scrolls under the app bar.

Paragraph 10. Content scrolls under the app bar.

Paragraph 11. Content scrolls under the app bar.

Paragraph 12. Content scrolls under the app bar.

Paragraph 13. Content scrolls under the app bar.

Paragraph 14. Content scrolls under the app bar.

Paragraph 15. Content scrolls under the app bar.

Paragraph 16. Content scrolls under the app bar.

Paragraph 17. Content scrolls under the app bar.

Paragraph 18. Content scrolls under the app bar.

Paragraph 19. Content scrolls under the app bar.

Paragraph 20. Content scrolls under the app bar.

exitUntilCollapsed

Subtitle

Paragraph 1. Content scrolls under the app bar.

Paragraph 2. Content scrolls under the app bar.

Paragraph 3. Content scrolls under the app bar.

Paragraph 4. Content scrolls under the app bar.

Paragraph 5. Content scrolls under the app bar.

Paragraph 6. Content scrolls under the app bar.

Paragraph 7. Content scrolls under the app bar.

Paragraph 8. Content scrolls under the app bar.

Paragraph 9. Content scrolls under the app bar.

Paragraph 10. Content scrolls under the app bar.

Paragraph 11. Content scrolls under the app bar.

Paragraph 12. Content scrolls under the app bar.

Paragraph 13. Content scrolls under the app bar.

Paragraph 14. Content scrolls under the app bar.

Paragraph 15. Content scrolls under the app bar.

Paragraph 16. Content scrolls under the app bar.

Paragraph 17. Content scrolls under the app bar.

Paragraph 18. Content scrolls under the app bar.

Paragraph 19. Content scrolls under the app bar.

Paragraph 20. Content scrolls under the app bar.

const scrollRef = useRef<HTMLDivElement>(null)

<div ref={scrollRef} style={{ height: 480, overflowY: 'auto' }}>
  <TopAppBar
    variant="large"
    title="Photos"
    scrollBehavior="exitUntilCollapsed"
    scrollTarget={scrollRef}
  />
  {content}
</div>

Scroll state props

Without a scroll source, the state props render any scroll state directly: scrolled (surface-container color), collapsedFraction (0 = expanded, 1 = collapsed; medium / large), and hidden (slides the bar out and makes it inert). They override the values derived from scrollBehavior.

scrolled

collapsedFraction={1}

<TopAppBar title="Title" scrolled={isScrolled} />
<TopAppBar variant="medium" title="Title" collapsedFraction={0.5} />

Bottom app bar

An 80dp surface-container bar with actions at the start and an optional FAB at the end.

<BottomAppBar floatingActionButton={<Fab icon={<AddIcon />} aria-label="Add" />}>
  <IconButton variant="standard" icon={<SearchIcon />} aria-label="Search" />
</BottomAppBar>

tip

m3.material.io no longer recommends the bottom app bar for new designs — prefer a docked Toolbar. BottomAppBar is not deprecated and stays available.

Accessibility

TopAppBar renders a <header> landmark and its title as an <h1> — use it once per page, as the page heading.
Every icon-only action needs an aria-label.
hidden (and a bar hidden by enterAlways) is inert, so hidden controls leave the focus order. Leave scrollBehavior unset when every control must stay reachable. Motion is instant under prefers-reduced-motion: reduce.
A scroll container used as scrollTarget should be keyboard-scrollable (e.g. tabIndex={0} with a role="region" and label).

Props

TopAppBar

Prop	Type	Default	Description
`actions`	`ReactNode`	—	Trailing action controls.
`collapsedFraction`	`number`	—	State (medium / large): how far the bar is collapsed toward its 64dp row, from 0 (expanded) to 1 (collapsed); the container color follows it. Overrides the value derived from `scrollBehavior`.
`hidden`	`boolean`	—	State: slides the whole bar out of view (upward) and takes it out of the focus order / accessibility tree (`inert`). Unlike the native `hidden` attribute the bar keeps its layout box. Overrides `scrollBehavior`.
`navigationIcon`	`ReactNode`	—	Leading navigation control (e.g. a back or menu IconButton).
`scrollBehavior`	`enum`	—	Observe `scrollTarget` and drive the state above automatically. The bar then becomes `position: sticky; top: 0` (override with `style` / `className`) and is meant to sit at the top of the scrolling content. Leave it unset (and use the state props, or nothing) to keep the bar fully expanded and reachable — e.g. for assistive-technology users. Motion is instant under `prefers-reduced-motion: reduce`.
`scrolled`	`boolean`	—	State: content is scrolled under the bar → the container turns surface-container (color only, no shadow). Overrides the value derived from `scrollBehavior`.
`scrollTarget`	`ScrollTarget`	`window`	The scroll container observed by `scrollBehavior` (a ref, an element or the window).
`subtitle`	`ReactNode`	—	Supporting text under the title (on-surface-variant; LabelMedium on `small`, LabelLarge on `medium`, TitleMedium on `large`).
`title`	`ReactNode`	—	The bar title (rendered as the page heading).
`titleAlignment`	`enum`	'start' ('center' for the deprecated `variant="center"`)	Title alignment, available on every size. A centered title is centered across the full bar width and only pushed inward when it would collide with the navigation icon or the actions.
`variant`	`enum`	`small`	Size / layout. `medium` / `large` are the M3 Expressive flexible bars. `'center'` is deprecated — use `titleAlignment="center"`.

BottomAppBar

Prop	Type	Default	Description
`children`	`ReactNode`	—	Action controls (icon buttons).
`floatingActionButton`	`ReactNode`	—	Optional trailing floating action button.

Sizes​

Subtitle​

Title alignment​

Scroll behavior​

Scroll state props​

Bottom app bar​

Accessibility​

Props​

TopAppBar​

BottomAppBar​

Sizes

Subtitle

Title alignment

Scroll behavior

Scroll state props

Bottom app bar

Accessibility

Props

TopAppBar

BottomAppBar