App Bar
This App Bar is part of the basic collection of components shared by all products within a platform, and that provides a common set of interaction patterns that persist between and across products.
This collection consists of three components: the header, the side navigation, and the content area. In other cases, the right panel can be used for more complex filtering when needed. All four can be used independently, but these components are designed to work together.
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.
Contextual: Top app bars have a consistent position and content to increase familiarity.
When to use
This component is the foundation for navigating and orienting your user across the user interface. The 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 when used on a mobile device.
- It can be used by itself or combined with the lateral navigation and right panels for more complex navigation.
Types
The bar holds the content of the top app bar. Two variants of bar heights are available:
- Regular (mobile and desktop)
- Prominent (mobile)
Mobile App Bar
Prominent top app bars can be used for longer titles, to house imagery, or to provide a stronger presence to the top app bar.
Regular and prominent top app bars in photos app. Prominent bar height is twice the height of the regular bar.
Desktop App Bar
The App Bar must be 100% on desktop, and the elements must be placed into two sections:
- The left section must contain the menu icon, the application icon, and the title.
- The right section must contain the action items and the user menu.
Design guidelines
Anatomy
The app bar is a special kind of toolbar that’s used for branding, navigation, search, and actions.
- Navigation icon (optional)
- App title (optional in mobile)
- Action items (optional)
- User menu
- App logo (optional)
- Divider (optional)
Navigation icon (optional)
A navigation icon is optional. When it appears in an app bar, it’s aligned at the top left of the app bar. It can also be completely omitted if no navigation is required.
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
1. Navigation icon
App Title (optional)
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 cross-platform adaptation.
If the title text is long, use a prominent app bar and wrap the title to two lines.
Don't wrap text in a regular top app bar.
Don't truncate text, hiding the full title may cause misunderstanding.
Don't shrink text to fit on a single line.
For the mobile version of the app bar with the logo, the app title is shown as the main title, leaving the app bar itself.
Action items (optional)
Icons on the right side of the app bar are app-related actions.
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 top app bar behavior.
- Arrange the actions by placing the most frequently used action
- On the far left, the second most frequently used action on the right, and so on with a maximum of three icons.
- Next to the action icons, on the right, should be the user profile icon.
- The remaining or secondary actions should be placed in an overflow menu.
In an app bar, all icons should be the same color.
User menu
It's available in the app bar to provide access to user-specific options. In this menu, users can manage their profile, settings, and logout. The user menu CAN have two styles:
- Icon only to save space.
- Icon + username for better reference.
App logo (optional)
Previously, our app bars focused solely on the name or function of the application, which worked well in isolated contexts. However, as our systems grow and multiple applications are developed under different institutional umbrellas, users increasingly need a visual cue to quickly identify who they belong to.
By adding the institutional logo to the app bar, we address the following needs:
- Improving Brand Recognition: We reinforce the identity of the institution behind the app.
- Enhancing User Orientation: It especially helps users that navigate across multiple apps, providing context and reducing confusion.
- Supporting a Cohesive Design System: The app logos complement the titles, but they do not replace them necessarily.
- Aligning with Best Practices in UX: It helps us improve usability, consistency, and most importantly, trust.
Divider (optional)
This divider only appears if both app logo and app title are used at the same time. It helps separate the brand from the product name itself.
2. Divider
3. App name
Placement
The recommended placement of elements in the top app bar for left-to-right languages is:
- Place navigation on the far left
- Place any titles to the right of the navigation section
- Place contextual actions to the right of navigation
For right-to-left languages, placement positions should be flipped.
Behavior
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 clear. The top app bar disappears upon scrolling up, and appears upon scrolling down.
Top app bars can be positioned at the same elevation as content. Upon scroll, they increase elevation and let content scroll behind them.
When scrolling up, prominent top app bars using imagery can transform into normal top app bars. They should not return to prominent mode until the user scrolls back to the top of the page.
Nesting actions
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.
As a top app bar is resized, actions move to the overflow menu from right to left. Scaled down to 62.5%
Specs
Default heights:
| Device (orientation) | Height (dp) |
|---|---|
| Tablet/Desktop | 64 or 72 (for app bars with both app logo + title) |
| Mobile (landscape) | 48 |
| Mobile (portrait) | 56 |
For extended app bars, the height is equal to the default height plus content increment(s).
Desktop App Bar
In the case of the desktop toolbar, the height must be 64px.
The padding from the icons to the right and left margins must be 24px, and from the icons to the top and bottom margins must be 20px.
Mobile App Bar
The height of the mobile app bar must be 56px. The padding must be 16px on all sides: between the container and the menu icon, between the user menu and the container, and at the top and bottom from the icons to the border.
For the app bar that is prominent in mobile, the sizes and paddings are the same, with one exception: the height of the app bar changes. It increases in height by 72px, so the total must be 128px.
App bar with logo