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: District and Neighborhood. Either top bar variant may be set as Standard, meaning it scrolls out of view, or Pinned, meaning it never leaves the view, elevating itself over other content within the view. Depending on the variant, pinned top bars transition fluidly through two levels of emphasis: High emphasis and Medium emphasis. Both District and Neighborhood top bars may start in either the high or medium emphasis.

District

District top bars are high emphasis, only identifying the primary landing screen of a Bucket or Widget view. By default, District top bars are set to Standard, meaning the top bar scrolls out of view as the user swipes through the context. When a district top bar is set to Pinned, it should transition fluidly through two levels of emphasis: High emphasis and Medium emphasis (more details in the Behavior section). 

High emphasis
  1. Container
  2. District heading — Large heading
  3. Logo container 
  4. District quick action button group — Embedded medium emphasis small quick action buttons  (Optional)
Medium emphasis
  1. Container
  2. Logo container
  3. Quick action button group — Embedded medium emphasis small quick action buttons (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 logo asset should be an SVG or Lottie file, but may also display a PNG. The vertical height of this container is set to match the height of the small quick action buttons (32).

All animated logos (Lottie) should be set to loop indefinitely. It is recommended to loop the animation slowly, about once every 10 seconds, so as not to be distracting. This Lottie file will not be affected by the Lottie component.

District quick action button group extension

The district 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 rightmost action may be replaced with a menu dropdown trigger quick action button.

District heading

The district heading reflects the name of the active widget or bucket. This container should fill the view and honor the right margin. The name should wrap when it exceeds a single line. The name should be truncated with an ellipses when it exceeds two lines. 

Neighborhood

Neighborhood top bars guide the user through workflows, subviews, and contexts that are not the primary landing page of a bucket or widget. By default, neighborhood top bars are set to Pinned, elevating themselves as content scrolls beneath. A neighborhood top bar may be set to Standard and simply scroll out of view.

High emphasis
  1. Container
  2. View heading — Medium heading (Optional)
  3. Backstack quick action button — Embedded medium emphasis small quick action button
  4. Quick action button group — Embedded medium emphasis small quick action buttons  (Optional)
Medium emphasis
  1. Container
  2. Backstack quick action button — Embedded medium emphasis xsmall quick action button
  3. View heading — Subtitle 1 (Optional)
  4. Quick action button group — Embedded medium emphasis xsmall quick action buttons  (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 unless used atop a high emphasis surface. 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. In these views, the action should never change to a “back” icon—instead forward/backward sub-navigation should be completed using actions within the view.

The icon should be set to a leftwards caret when the subview is a drill-in view.

Neighborhood quick action button group extension

The quick action button group in the neighborhood is reserved only for contextually relevant tasks. For example, within the Manage payees context, a user might find quick action buttons for searching and filtering the payees within the 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. 

Whenever possible, refrain from using this extension. It is best to place these actions within the content area as opposed to the top bar.

Neighborhood heading

The neighborhood heading should be as short as possible to avoid truncation in both the high and medium emphasis states. In both states, the name 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.

District

Element Property Value
Container (high emphasis) Background color Defined by theme or none
Container (medium emphasis) Background color Defined by theme or ∆colorPlatformWhite
District heading Text color ∆color--On or ∆colorPlatformGray900
Quick action buttons All properties Branded prefix informed by parent (∆colorBrandedGuidance by default)

Neighborhood

Element Property Value
Container (high emphasis) Background color Defined by context or none
Container (medium emphasis) Background color Defined by context or ∆colorPlatformWhite
District heading Text color ∆color--On or ∆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 (∆colorBrandedGuidance by default)

Size

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

Elevation

Element Property Value
Surface (scrolled) Shadow Y-offset ∆surfacePlatformRaisedShadowY
Surface (scrolled) Shadow opacity ∆surfacePlatformRaisedOpacity
Surface (scrolled) Shadow spread ∆surfacePlatformRaisedSpread
Surface (scrolled) Shadow blur ∆surfacePlatformBlurResting

Spacing

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

Depending on the variant, pinned mobile top bars scroll fluidly through two levels of emphasis: High emphasis and Medium emphasis. Mobile top bars transition between these states linearly through the user’s scrolling gesture. Both variants default to the High emphasis state but may be set to start at a lower emphasis state. In the event that a top bar begins in a lower emphasis state, it should never transition to a higher emphasis state. For example, if a neighborhood top bar begins in the Medium emphasis state, it should never transition to a High emphasis state.

The High emphasis state provides the clearest wayfinding affordance to the user.

The Medium emphasis minimizes the wayfinding elements. This state elevates the top bar over the content area as content approaches its container.

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 elevation when the content region reaches the top bar container.

District scroll - High to medium

As the district scrolls from a high emphasis state to a medium emphasis state, the text moves ∆spacingPlatformHuge vertically and fades to 0% opacity.

Please note: the elevation should only occur when the content area begins to scroll beneath the top bar. The state may change with no visible elevation if the user scrolls the view in such a way that no content is covered by the medium emphasis top bar.

District scroll - Medium to high

The medium emphasis state scroll mirrors the choreography of the high to medium behavior. 

Neighborhood scroll - High to medium

Please note: the elevation should only occur when the content area begins to scroll beneath the top bar. The state may change with no visible elevation if the user scrolls the view in such a way that no content is covered by the medium emphasis top bar.

Neighborhood scroll - Medium to high

The medium emphasis state scroll mirrors the choreography of the high to medium behavior.


Developer Docs

Vue Developer Docs

Component documentation coming soon!