Mobile Top Bar

In progress

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.

Mobile Top Bar

Anatomy

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

Primary top bars only identify the primary landing screen of a bucket or widget view within the shortcut bar.

  1. Container
  2. Logo container
  3. Quick action button group — Embedded medium emphasis small quick action buttons (Optional)
  4. Divider (Optional)

Logo container

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

Secondary top bar guides the user through workflows, subviews, and contexts that are not the primary landing page of a bucket or widget.

  1. Container
  2. Backstack quick action button — Embedded medium emphasis small quick action button (Optional)
  3. Heading — Subtitle 1 (Optional)
  4. Quick action button group — Embedded medium emphasis xsmall quick action buttons  (Optional)
  5. 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. 

Secondary heading

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.

Specs

Color 

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.

Primary

Element Property Value
Container Background color Defined by theme or ∆colorPlatformWhite
Quick action buttons All properties Branded prefix informed by parent (∆colorBrandedGuidance by default)

Secondary

Element Property Value
Container Background color Defined by context or ∆colorPlatformWhite
Heading Text color ∆colorPlatformGray900
Backstack quick action buttons All properties Branded prefix informed by parent (∆colorBrandedGuidance by default)
Quick action buttons All properties Branded prefix informed by parent (∆colorBrandedAffordance by default)

Size

Element Property Value
Logo container Width Defined by viewport - see spacing below
Logo container Height 32

Elevation

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

States

There are no states considerations for this component in phase 1.


Theming

There are no theming considerations for this component in phase 1.

Placement

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).

Behavior

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 Docs

Vue Developer Docs

Component documentation coming soon!