Refer to the Material 3 App Bar guideline article provided by the Android operating system. Our design guideline serves as an extension, offering further details about specific topics.
[internal_only] In the Adaptive Layout Toolkit, you can find templates and examples of use cases for the M3 standard component. You can duplicate these using the Horizon theme with a Tonal option to create your own designs. [/internal_only]
Intro
An app bar contains actions and content related to the current screen.
This includes navigation, title, and actions. The elements in the app bar are specific to the current screen, but the app bar can also contain consistent elements across an app.
App bar on compact screen (left) and expanded screen (right)
Usage
Do
Use an app bar to provide navigation, titles, and actions that are specific to the current screen.
Don't
Don’t use an app bar when there is no need for navigation or actions.
- Keep the title text short and concise.
- For the collapsing layout, combine the large bar and the small bar with the left-aligned title.
- Use an overflow menu if there are more than three icon buttons on compact screens and four icon buttons on expanded screens.
- Don’t use the profile and overflow menu together.
- Ensure consistency of the position of the “Close”/“Cancel” and “Back” icons.
- Try to use icon buttons due to limited space.
- Use the default sizes of the app bar.
- Try to avoid truncation or shrinking of the title text.
Adaptive Design
In an adaptive layout, incorporating an app bar in every pane is highly recommended as it enhances usability and consistency across different screen sizes and orientations. By ensuring that the app bar spans the entire width of each pane, users can transition between different window sizes while maintaining access to key actions, navigation, and information. This consistency not only provides a familiar interface that reduces cognitive load but also ensures an intuitive and user-friendly experience across all device configurations.
App bar in every pane of a list-detail layout
Best Practices
M3 standard components should follow Horizon’s tonal theme, typography, and iconography.
Configurations for App Bar Types
Apply the following settings to search bars, small app bars, medium flexible app bars, and large flexible app bars.
A. Search App Bar
App bar container: default color Surface, on scroll color Surface Container, on scroll elevation 2
Search bar container: default color Surface Container, on scroll color Surface Container Highest
B. Small App Bar
App bar container: default color Surface, on scroll color Surface Container, on scroll elevation 2
C. Medium Flexible App Bar
App bar container: default color Surface, on scroll color Surface Container, on scroll elevation 2
D. Large Flexible App Bar
App bar container: default color Surface, on scroll color Surface Container, on scroll elevation 2
App bar types: search app bar (top), small (second), medium (third) and large (bottom)
Configurations for App Bar Elements
The app bar has three positions for UI elements. The leading element on the left, the headline and subtitle in center and the trailing elements on the right.
Apply the following settings to leading and trailing elements as well as headline and subtitle.
Leading and Trailing Elements
A. Leading Element
Icon: Fiori icon, On Surface color
B. Trailing Element
Icon: Fiori icon, On Surface Variant color or avatar
Leading element (left) and trailing element (right)
You can accommodate two to three trailing icons in an app bar. If there are additional icons for further actions, they should be placed in an overflow menu. Arrange the icons in order of priority from left to right, ensuring the most frequently used icon is always on the left. Consider placing less important or secondary actions in the overflow to maintain a clean and efficient interface.
On an app's home screen, the profile should be part of the trailing elements for optimal organization. We recommend featuring a profile with a limited number of actions to maintain a streamlined interface. These actions should be positioned to the left of the profile. Combining a profile with an overflow menu is not recommended, as this can make navigation too complex.
Headline and Subtitle
A. Small App Bar
Headline: Text H6, On Surface color
Subtitle: Text Caption 2, On Surface Variant color
B. Medium App Bar
Headline: Text H4-Small, On Surface color
Subtitle: Text Subtitle 3, On Surface Variant color
C. Large App Bar
Headline: Text H4, On Surface color
Subtitle: Text Button, On Surface Variant color
Headline and subtitle (from top to bottom): small bar, medium bar, and large bar
Search App Bar
A. Leading Element
Icon: Fiori icon, color On Surface
B. Search
Label: Text Body 1, color On Surface Variant
Container: Color Surface Container
C. Trailing Element
Icon: Fiori icon, On Secondary Container color or avatar
Search bar elements
Logo Placement
The product logo should be placed in the app bar.
Logo placement in the small app bar (left) and medium app bar (right)
Resources
Development: FioriTopAppBar, FioriAppBar
SAP Fiori for iOS: Navigation Bar
Material Design: App Bar
Related Components/Patterns: Button, Menu