toc

App Bar

An app bar sits at the top of a screen and shows its title, navigation and actions, and can hide or compress as the page scrolls.

View as Markdown

Inbox 24 unread

<md-gb-app-bar>
  <md-gb-icon-button slot="leading" aria-label="Open menu">
    <md-gb-icon>menu</md-gb-icon>
  </md-gb-icon-button>
  Inbox
  <span slot="subtitle">24 unread</span>
  <md-gb-icon-button slot="trailing" aria-label="Search">
    <md-gb-icon>search</md-gb-icon>
  </md-gb-icon-button>
</md-gb-app-bar>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-app-bar.json (setup)

Usage guidelines

Link to “Usage guidelines”

Keep it about the page. An app bar shows the title, navigation and a few actions that belong to the current page.
Limit the actions. Show one action, two if needed, and put many actions in a toolbar. Avoid an overflow menu when you can.
Pick a size. Use medium or large for a more expressive headline, and a small bar once content scrolls.
Let it respond to scrolling. It can hide or compress while people scroll.

This component is new in M3 Expressive.

Anatomy

Link to “Anatomy”

An app bar holds a leading navigation button, a title with an optional subtitle or image, and trailing actions.

arrow_back

Trip to Lisbon 3 days

favorite

<md-gb-app-bar>
  <md-gb-icon-button slot="leading" aria-label="Back">
    <md-gb-icon>arrow_back</md-gb-icon>
  </md-gb-icon-button>
  Trip to Lisbon
  <span slot="subtitle">3 days</span>
  <md-gb-icon-button slot="trailing" aria-label="Share">
    <md-gb-icon>share</md-gb-icon>
  </md-gb-icon-button>
  <md-gb-icon-button slot="trailing" aria-label="Favorite">
    <md-gb-icon>favorite</md-gb-icon>
  </md-gb-icon-button>
</md-gb-app-bar>

Examples

Link to “Examples”

Sizes

Link to “Sizes”

Set size to md or lg for a taller bar. The default is sm.

arrow_back

Settings

<md-gb-app-bar size="md">
  <md-gb-icon-button slot="leading" aria-label="Back">
    <md-gb-icon>arrow_back</md-gb-icon>
  </md-gb-icon-button>
  Settings
</md-gb-app-bar>

Centered text

Link to “Centered text”

Add centered to center the title and subtitle.

Photos

<md-gb-app-bar centered>
  <md-gb-icon-button slot="leading" aria-label="Open menu">
    <md-gb-icon>menu</md-gb-icon>
  </md-gb-icon-button>
  Photos
</md-gb-app-bar>

Search

Link to “Search”

Set variant="search" and put a text input in the search slot.

arrow_back

<md-gb-app-bar variant="search">
  <md-gb-icon-button slot="leading" aria-label="Back">
    <md-gb-icon>arrow_back</md-gb-icon>
  </md-gb-icon-button>
  <input slot="search" type="search" aria-label="Search mail">
</md-gb-app-bar>

Scroll behavior

Link to “Scroll behavior”

Set scroll-behavior to hide to hide the bar while scrolling down, or to compress to turn a medium or large bar into a small one. Use scroll-target with the id of a scrolling element, or leave it out to follow the window.

arrow_back

Recipes

Lemon pasta

Sourdough

Pad thai

Summer salad

Tomato soup

Apple pie

Fried rice

Banana bread

HTML

CSS

<div id="content">
  <md-gb-app-bar size="lg" scroll-behavior="compress" scroll-target="content">
    <md-gb-icon-button slot="leading" aria-label="Back">
      <md-gb-icon>arrow_back</md-gb-icon>
    </md-gb-icon-button>
    Recipes
  </md-gb-app-bar>
  <p>Lemon pasta</p>
  <p>Sourdough</p>
  <p>Pad thai</p>
  <p>Summer salad</p>
  <p>Tomato soup</p>
  <p>Apple pie</p>
  <p>Fried rice</p>
  <p>Banana bread</p>
</div>

#content {
  inline-size: 100%;
  block-size: 280px;
  overflow: auto;
}

md-gb-app-bar {
  position: sticky;
  inset-block-start: 0;
}

Overflow actions

Link to “Overflow actions”

On small windows only a few trailing actions show. The rest are listed in the overflowchange event, and the overflow slot holds a menu button that appears while actions are collapsed.

Gallery

favorite

more_vert

<md-gb-app-bar>
  Gallery
  <md-gb-icon-button slot="trailing" aria-label="Search">
    <md-gb-icon>search</md-gb-icon>
  </md-gb-icon-button>
  <md-gb-icon-button slot="trailing" aria-label="Share">
    <md-gb-icon>share</md-gb-icon>
  </md-gb-icon-button>
  <md-gb-icon-button slot="trailing" aria-label="Favorite">
    <md-gb-icon>favorite</md-gb-icon>
  </md-gb-icon-button>
  <md-gb-icon-button slot="overflow" aria-label="More options">
    <md-gb-icon>more_vert</md-gb-icon>
  </md-gb-icon-button>
</md-gb-app-bar>

Accessibility

Link to “Accessibility”

The title is the app bar's text, so make it match the page. Add context in an aria-label if the title alone is unclear.
Label every icon-only button with aria-label.
Tab moves through the buttons, and Enter or Space activates the focused one.
A sticky or fixed app bar can cover focused content. Call setupScrollPadding() from scroll-padding.js so focused elements scroll clear of it.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked92% tokens

104 of 319 buildable spec units are tested, 22 are excluded with a written reason and 0 are uncovered (the target is 0). 47 of 51 token declarations match the spec (92%), and 4 have no spec token.

app-bars on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

Container scroll-state queries (opens in a new tab) Limited availability degrades safely where it is missing
line-clamp (opens in a new tab) Limited availability degrades safely where it is missing

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 pass

The component renders no interactive role of its own.

2 rendered states run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse97 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Eliminate render-blocking resources
Minify JavaScript
Reduce unused JavaScript
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-app-bar>

Link to “<md-gb-app-bar>”

A Material Design app bar component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`centered` Whether the title and subtitle are centered instead of leading-aligned (the M3 Expressive "centered text" configuration). Defaults to `false`.	`centered`	`boolean`	`false`
`scrollBehavior` How the app bar reacts to scrolling: `hide` (hide on scroll down, reveal on scroll up) or `compress` (medium and large flexible app bars become small until scrolled back to the top).	`scroll-behavior`	`"hide"`	"compress"
`scrolled` Whether the app bar is in its scrolled state. Defaults to `false`. A medium or large flexible app bar in its scrolled state is shown as a small one (app-bars.md: "When scrolled, medium flexible and large flexible app bars can transform into small app bars").	`scrolled`	`boolean`	`false`
`scrollTarget` The id of the element whose scrolling drives `scroll-behavior`. Defaults to the window.	`scroll-target`	`string`	`''`
`size` The size of the app bar (`sm`, `md`, `lg`). Defaults to `sm`.	`size`	`AppBarSize`	`'sm'`
`variant` The behavioral variant of the app bar (`standard` or `search`). Defaults to `standard`.	`variant`	`AppBarVariant`	`'standard'`

App Bar

Usage guidelines

Anatomy

Examples

Sizes

Centered text

Search

Scroll behavior

Overflow actions

Accessibility

Compatibility

API reference

<md-gb-app-bar>

Properties

Download & copy

Download

Copy

Customize theme