Shortcut Bar

Approved — Ready for dev

The shortcut bar component is used for triggering navigation between four districts and/or buckets in the app, and one additional trigger for the global navigation view. With a total of five possible triggers, the shortcut bar is the primary way mobile users jump between the highest value areas within the app.

Shortcut Bar

Anatomy

The essential parts of the shortcut bar component are the raised low-emphasis surface, up to 4 triggers for navigating to districts or tasks, and a trigger for navigating to the global navigation view. The shortcut bar is also responsible for providing extra vertical space as needed for the iOS and Android home gesture UI.

Similar to the text field component, the shortcut bar component offers unique styling profiles that dramatically change the look and feel (see theming for more details on the styling profile options). 

  1. Shortcut bar container — Low Emphasis Raised Surface
  2. Trigger container — Snowflake styling treatments
  3. Selected trigger icon — Avatar
  4. Static trigger icon — Avatar
  5. Extra space for iOS/Android home gesture UI (optional)
  6. Static trigger label — Snowflake type treatment 
  7. Selected trigger label — Snowflake type treatment

Specs

Color

The shortcut bar uses a low emphasis raised surface as the parent container for the component. All colors associated with the raised surface are documented in the surface component. Colors specific to the avatar and icon are as follows:

Element Property Value
Static trigger label Text color ∆colorPlatformGray500
Selected trigger label Text color ∆colorGuidance800
Static trigger avatar Background color None
Static trigger avatar Background color None
Static trigger avatar Icon color ∆colorGuidanceAccessible
Selected trigger avatar Background color ∆colorGuidance200
Selected trigger avatar Icon color ∆colorGuidance800

Elevation

The parent container is a low-emphasis raised surface, and all elevation specs are documented in the surface component docs.

Spacing

Triggers

Vertical spacing between the avatar and label is a snowflake spacing at just 1px.

Triggers should respond to the width of the device dynamically — the width of each trigger taking up a certain percentage of the width of the screen, with all triggers combined equaling 100%. 

Note: There will always be at least two triggers for “Accounts” and “More”, and not every customer will have every widget configured for every user.

Number of triggers Width of each trigger
2 50%
3 33.33%
4 25%
5 20%


With home gesture UI 

When the home gesture UI is present, additional space is added to ensure all the triggers remain within the “safe area” on iOS and not extend down into the “Superview”. While the home gesture icon is not as commonplace yet for Android devices, since Android 10 introduced the home gesture, more and more manufacturers are defaulting to this paradigm.

Without home gesture UI

Typography

Snowflake Type Treatments

The smallest level of type in the system is Caption, but we need the type to be just a touch smaller for the shortcut bar. To accomplish this and also balance the need to elevate the emphasis of the trigger labels, and create an additional layer of branding, a one-off snowflake treatment is necessary.

Element Property Value
Trigger label Font family ∆typeBrandedButtonFontFamily
Trigger label Font size 11
Trigger label Line height 11
Trigger label Font weight ∆typeBrandedButtonFontWeight
Trigger label Character spacing 1%


States

Note: Mouse users progress through all the states, but non-mouse users jump from static to pressed to selected; skipping hover.

Theming

Additional shortcut bar style profiles coming soon!

Placement

The shortcut bar is always pinned to the bottom of the screen (Flutter) or viewport (Vue) and always appears in front of all other UI. The only exception to this is with bottom sheets and low emphasis web views; which would appear higher on the z-axis than the shortcut bar.

Behavior

Interaction Steps Duration Easing Notes Haptics
Hover 1 ∆motionTimeExtraFast ∆motionTimingFunctionDeceleration Selectable surface background color transitions from white to ∆colorBrandedGuidance50 none
Pressed 1a ∆motionTimeNano ∆motionTimingFunctionDeceleration Avatar background color transitions from non to ∆colorBrandedGuidance200 none
1b ∆motionTimeNano ∆motionTimingFunctionDeceleration Avatar icon color transitions from ∆colorBrandedGuidanceAccessible to ∆colorBrandedGuidance800 none
1c ∆motionTimeNano ∆motionTimingFunctionDeceleration Trigger label text color transitions from ∆colorPlatformGray500 to ∆colorBrandedGuidance800 none

Developer Docs

Vue Developer Docs

Component documentation coming soon!