Usage
The app bar sits at the top of the screen and holds the title of the current page along with the actions that belong to it. Use it on any screen that needs a title, a way back, or up to three page-level actions.
- Use the leading button to move back a screen or to open the page menu.
- Limit trailing actions to three, and put the most used one closest to the leading edge.
- Choose the medium app bar when the headline needs room to wrap on a larger screen.
- Use trailing icons to open menus that hold more actions. They’re for acting on the page.
- Add global controls unless they’re genuinely useful on that page.
Design properties
| Property | Values | Default |
|---|---|---|
| Type Variant | Small centered | Small | Medium | Small centered |
| State Variant | Default | Scrolled | Default |
| Show 1st trailing icon Boolean | true | false | true |
| Show 3rd trailing icon Boolean | true | false | true |
| Show 2nd trailing icon Boolean | true | false | true |
Types
Small centered
Use when the headline should be centered instead of on the leading edge.
Small
Use when the headline should align to the leading edge instead of the center.
Medium
Use on larger mobile screens when the headline needs room to wrap to a second line.
Behavior and interaction
Behavior
- The app bar can stay fixed while the page scrolls, or hide and reappear in sync with scrolling.
- When the page is scrolled, the container takes a contrasting fill so the bar separates from the content beneath it.
- The leading button either moves back a screen or opens the page menu. It can be swapped for a logo, and a logo can carry an action but should not open a menu.
- Headline text fits on one line on small screens. The medium app bar lets it wrap to a second line on larger screens.
Positioning
- The app bar should be anchored to the top of the screen, with space_static100 (8dp) spacing between the top app bar and any underlying content in the unscrolled state.
- The width should be set to full-width to fill the screen horizontally.
- Up to three trailing icon buttons sit at the trailing edge, with the most used closest to the leading edge.
Writing guidelines
- Headline text should succinctly identify the page, section, or product, and should be as brief and direct as possible.
- Keep headlines specific to the current screen or task.
- Use sentence case (only the first word and proper nouns capitalized).
- Make the headline descriptive, not decorative — it should answer “Where am I?”
- Avoid redundancy with navigation labels or tab names.
- Ensure headlines adapt to layout changes and text wrapping rules:
- Small screens: single-line headlines only.
- Medium and large screens: may wrap to a second line when used with medium top app bar, but try to avoid if possible.
- Use to identify and describe the page, section, or product.
- Use to show navigation or actions related to the page content.
- Use concise, meaningful headlines (e.g., “Settings,” “Profile,” “Downloads”).
- Match the headline to the user’s current context or action.
- Use consistent terminology across pages, avoiding redundant or filler words.
- Keep headline text short and descriptive.
- Wrap long headlines only on medium or large screens.
- Keep localization and edge cases in mind in regards to text length.
- Never truncate headline text.
- Don’t wrap headline text on small screens.
- Don’t use all caps or decorative symbols.
- Don’t repeat the app or brand name in every headline.
- Don’t overload the headline with secondary information (dates, counts, etc.).
- Don’t center-align long or multi-line headlines, as it harms readability.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Oct 28, 2025 |
1.0.0 |
Initial draft of guidance |