Updated top app bars have a larger height and text, colored fill that replaces elevation shadows, new color mappings, dynamic color compatibility, and a center-aligned variation.
- open_in_new
Top app bar in Material Design 3
Usage
The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.
It can transform into a contextual action bar.
Principles
Persistent
Top app bars appear at the top of each screen in an app, and can disappear upon scroll.
Guiding
Top app bars provide a reliable way to guide users through an app.
Consistent
Top app bars have a consistent position and content to increase familiarity.
Types
There are regular top app bars and contextual action bars.
Anatomy
The recommended placement of elements in a top app bar for left-to-right languages is:
- Place navigation on the far left
- Place any titles to the right of navigation
- Place contextual actions to the right of navigation
- Place an overflow menu (if used) to the far right
For right-to-left languages, placement positions should be flipped.
Bar
The bar holds the content of the top app bar. A variety of bar heights are available: Prominent top app bars can be used fo
The bar holds the content of the top app bar. A variety of bar heights are available:
- Regular
- Prominent
- Dense (desktop only)
- Prominent dense (desktop only)
Prominent
Prominent top app bars can be used for longer titles, to house imagery, or to provide a stronger presence to the top app bar.
Dense (desktop only)
The top app bar may be condensed on desktop to accommodate denser layouts.
Prominent dense
Prominent top app bars on desktop can have a dense state to accommodate denser layouts.
Images in bars
Bars can contain imagery. Prominent top app bars are recommended for image use because they provide more space.
Don’t use imagery that makes top app bar text and icons illegible.
Navigation icon (optional)
A navigation icon is optional. When it appears in an app bar, it’s aligned on the left of the bar. It can take any of...
A navigation icon is optional. When it appears in an app bar, it’s aligned on the left of the bar.
It can take any of the following forms:
- A menu icon, which opens a navigation drawer
- An up arrow, which navigates upward an app’s hierarchy
- A back arrow, which returns to the previous screen
Title (optional)
The app bar title can be used to describe: By default, titles are left aligned on desktop. The default position of titles on mobile and...
The app bar title can be used to describe:
- The screen a user is currently on
- The section the user is currently in
- The app being used
By default, titles are left aligned on desktop. The default position of titles on mobile and tablet depends on the platform. More information on this is available in
Action items and overflow menu (optional)
App actions are placed on the right side of an app bar, either as icons or in an overflow menu. Overflow menus differ across mobile...
App actions are placed on the right side of an app bar, either as icons or in an overflow menu. Overflow menus differ across mobile platforms. For more guidance refer to
Icon placement
Place most-used actions on the left, progressing towards the least-used actions on the far right. Any remaining actions that don’t fit on the app bar can go into an overflow menu.
Actions move into and out of the overflow menu as the app bar width changes, such as if a device is rotated from landscape to portrait orientation. More guidance on this is available in
Cross-platform adaptation
On iOS, toolbars are called navigation bars and their height is shorter than the Android version. On Android, toolbars are called top app bars.
It’s recommended to use a platform’s default text alignment for toolbar titles, unless multiple action buttons are present.
Translucency
Material Design uses shadows to express elevation in app bars. In iOS, products can use translucency to differentiate app bars from content.
Behavior
Scrolling
Upon scrolling, the top app bar can remain in place, or transform in the following ways: When the top app bar scrolls, its elevation above...
Upon scrolling, the top app bar can remain in place, or transform in the following ways:
- Scrolling upward hides the top app bar
- Scrolling downward reveals the top app bar
When the top app bar scrolls, its elevation above other elements becomes apparent.
Nesting actions
When a screen is resized, the top app bar resizes with it. Actions are consolidated into the overflow menu. The actions move to the overflow...
When a screen is resized, the top app bar resizes with it. Actions are consolidated into the overflow menu.
Action positioning
The actions move to the overflow menu from right to left, making the most-used action the last to be moved to the overflow menu.
Contextual action bar
Usage
A top app bar can transform into a contextual action bar to provide contextual actions to selected items. For example, upon user selection of photos...
A top app bar can transform into a contextual action bar to provide contextual actions to selected items. For example, upon user selection of photos from a gallery, the top app bar transforms to a contextual app bar with actions related to the selected photos.
When a top app bar transforms into a contextual action bar, the following changes occur:
- The bar color changes
- Navigation icon is replaced with a close icon
- Top app bar title text converts to contextual action bar text
- Top app bar actions are replaced with contextual actions
Upon closing, the contextual action bar transforms back into a top app bar.
Anatomy
When a top app bar transforms into a contextual action bar, the bar should change color to indicate a change of state.
Bar
When a top app bar transforms into a contextual action bar, the bar should change color to indicate a change of state.
Theming
Fortnightly Material Theme
This news app’s top app bar has been customized using Material Theming. Areas of customization include color and typography. Fortnightly is a news app that...
This news app’s top app bar has been customized using Material Theming. Areas of customization include color and typography.
Color
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#FFFFFF 100% |
Text, icons | On Surface | Color Opacity |
#000000 100% |
Typography
Element | Category | Attribute | Value |
---|---|---|---|
Text | H6 | Typeface Font Size Case |
Merriweather Bold Italic 20 Title case |
Rally Material Theme
This financial app’s top app bar has been customized using Material Theming. Areas of customization include color and typography. Rally is a personal finance app...
This financial app’s top app bar has been customized using Material Theming. Areas of customization include color and typography.
Color
Element | Category | Attribute | Value |
---|---|---|---|
Container | Surface | Color Opacity |
#363640 100% |
Text | On Surface | Color Opacity |
#FFFFFF 100% |
Icons | On Surface | Color Opacity |
#FFFFFF 60% |
Typography
Element | Category | Attribute | Value |
---|---|---|---|
Text | H6 | Typeface Font Size Case |
Roboto Condensed Regular 20 Title case |
Shrine Material Theme
This retail app’s top app bar has been customized using Material Theming. Areas of customization include color and typography. Shrine is a lifestyle and fashion...
This retail app’s top app bar has been customized using Material Theming. Areas of customization include color and typography.
Color
Element | Category | Attribute | Value |
---|---|---|---|
Container | Primary | Color Opacity |
#FEDBD0 100% |
Text, icons | On Primary | Color Opacity |
#442C2E 100% |
Typography
Element | Category | Attribute | Value |
---|---|---|---|
Text | H6 | Typeface Font Size Case |
Rubik Medium 20 Title case |
Specs
Mobile
Regular top app bar
- 360 Measurement 360
- 56 Measurement 56
- 24 Measurement 24
- 16 Measurement 16
- 16 Measurement 16
- 24 Measurement 24
- 24 Measurement 24
- 32 Measurement 32
- 16 Measurement 16
- 20 Measurement 20
- 16 Measurement 16
#6200eeff
R98 G0 B238 A1.00
#ffffff
R255 G255 B255
Extended top app bar
- 24 Measurement 24
- 128 Measurement 128
- 16 Measurement 16
- 28 Measurement 28
- 24 Measurement 24
- 24 Measurement 24
- 16 Measurement 16
- 72 Measurement 72
- 360 Measurement 360
- 16 Measurement 16
#fffff
R255 G255 B15
#6200eeff
R98 G0 B238 A1.00