Mobile Top Bar
The mobile top bar serves as a guide for users to orient themselves from one view to another. The mobile top bar houses the back stack navigation, current view headings, and, depending on the variant, global or contextual activities. The mobile top bar is a part of the mobile chrome.
The mobile top bar has two variants: Primary and Secondary. The top bar variant is pinned, meaning it never leaves the view, elevating itself over other content within the view.
Primary top bars only identify the primary landing screen of a bucket or widget view within the shortcut bar.
- Logo container
- Quick action button group — Embedded medium emphasis small quick action buttons (Optional)
- Divider (Optional)
The logo container gives the FI an opportunity to present their branding prominently on key landing views within the experience. The logo asset should be anchored to the left center of the container and set to fill the container vertically or horizontally, whichever happens first. The logo asset should maintain its original proportions. The vertical height of this container is set to match the height of the small quick action buttons (32).
Primary quick action button group
The primary top bar may display up to three quick action buttons. These actions should prioritize global features such as notifications, profile management, or a global search experience.
The right most action may be replaced with a menu dropdown trigger quick action button.
Secondary top bar guides the user through workflows, subviews, and contexts that are not the primary landing page of a bucket or widget.
- Backstack quick action button — Embedded medium emphasis small quick action button (Optional)
- Heading — Subtitle 1 (Optional)
- Quick action button group — Embedded medium emphasis xsmall quick action buttons (Optional)
- Divider (Optional)
Backstack quick action button
The backstack quick action button should include a caret icon reflecting the direction of backwards movement within the platform. This quick action button should always utilize the guidance color variant. This action should always return the user to the context they previously navigated away from.
The icon should be set to a downwards caret when the subview is an expanded or a raised context.
The icon should be set to a leftwards caret when the subview is a drill-in view.
Secondary quick action button group
The quick action button group in the secondary is reserved only for contextually relevant tasks. For example, a user might need a quick action button for searching or filtering within a view. Because these actions generally trigger an event or flow, they should use the affordance variant quick action button.
This group may display up to two quick action buttons. The rightmost action may be replaced with a menu dropdown trigger quick action button.
The secondary heading should be as short as possible to avoid truncation. The heading should be truncated with an ellipses as the text exceeds one line.
Mobile top bar colors are given a system default as defined below.
For all of the following tables, “--” is a stand-in for the branded prefix. For example, the district heading on a Guidance themed top bar would have a text color of ∆colorBrandedGuidance900.
No elevation to consider for mobile top bar.
Some modern devices come with a safe zone at the top of the view and others don’t. To ensure that the mobile top bar does not become cramped on devices without a safe zone, two spacing paradigms have been defined. On devices with a safe zone, less spacing is needed at the top of the mobile top bar. On devices without a safe zone, slightly larger spacing is applied.
Devices with a safe zone
Devices without a safe zone
There are no states considerations for this component.
There are no theming considerations for this component.
All mobile top bars should appear at the top of the experience and should be covered by more elevated contexts, including: interstitial experiences, low and medium emphasis webviews, or views that appear on elevated contexts (such as expanded cards or bottom sheets).
The mobile top bar transforms from a high emphasis state to a medium emphasis state, or vice versa, when a user scrolls a view to see additional content. All of the animations should be tied to the user's scrolling/swiping gesture, triggering the divider when the content region reaches the top bar container.
The mobile top bar will stay pinned when a user scrolls a view to see additional content. All of the animations should be tied to the user's scrolling/swiping gesture, triggering the divider when the content region reaches the top bar container.
Note: The divider should only occur when the content area begins to scroll beneath the top bar. The state may change with no visible divider if the user scrolls the view in such a way that no content is covered by the top bar.
Primary scroll - Up
Primary scroll - Down
Secondary scroll - Up
Secondary scroll - Down
Developer DocsVue Developer Docs
Component documentation coming soon!