# 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. **Example: An app bar with a menu button, a title, a subtitle and a search action** ```html menu Inbox 24 unread search ``` ## 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](#sizes) for a more expressive headline, and a [small](#sizes) bar once content scrolls. * **Let it respond to scrolling.** It can [hide or compress](#scroll-behavior) while people scroll. This component is new in [M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive). ## Anatomy An app bar holds a leading navigation button, a title with an optional subtitle or image, and trailing actions. **Example: An app bar with a leading button, a title, a subtitle and trailing actions** ```html arrow_back Trip to Lisbon 3 days share favorite ``` ## Examples ### Sizes Set `size` to `md` or `lg` for a taller bar. The default is `sm`. **Example: A medium app bar with a back button and a title** ```html arrow_back Settings ``` ### Centered text Add `centered` to center the title and subtitle. **Example: An app bar with a centered title** ```html menu Photos ``` ### Search Set `variant="search"` and put a text input in the `search` slot. **Example: A search app bar** ```html arrow_back ``` ### 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. **Example: A large app bar that compresses while its list scrolls** *HTML* ```html
arrow_back Recipes

Lemon pasta

Sourdough

Pad thai

Summer salad

Tomato soup

Apple pie

Fried rice

Banana bread

``` *CSS* ```css #content { inline-size: 100%; block-size: 280px; overflow: auto; } md-gb-app-bar { position: sticky; inset-block-start: 0; } ``` ### 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. **Example: An app bar with trailing actions and an overflow button** ```html Gallery search share favorite more_vert ``` ## 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. ## API reference ### <md-gb-app-bar> A Material Design app bar component. #### 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' |