Workday Canvas
CTRL K

Top App Bar

An app bar that orients titles, global navigation, and local page actions as well as additional functionalities such as search, banners, and selection mode at the top of full screen views.

Sources
Figma

Anatomy

Breakdown of large Top App Bar design elements Breakdown of scrolled Top App Bar design elements

  1. Leading Navigation Icon Button: Navigates a user back a page in their flow in all instances except for the main app destinations where navigation is dictated by the Bottom Navigation Bar. Chevron Left on iOS and Arrow Left on Android.
  2. Status Bar: Platform and device specific convention for displaying system icons. Background fill should always blend in with the Top App Bar.
  3. Trailing Icon Buttons (Optional): Iconography for page or feature actions. The amount of icons displayed here varies by type of Top App Bar.
  4. Subtitle (Optional): Name of product area.
  5. Title (Optional): Heading for page or experience.
  6. Additional Content Slot (Optional): Area that accepts a single type of UI element such as a Secondary Button or Carousel. Content within the slot is gesture responsive, disappearing and reappearing with scrolls.
  7. Dropdown (Optional): Icon button that conceals a navigation Menu.
  8. Divider: Stroke that appears and persists on scroll to delineate the Top App Bar from page content being passed underneath.

Usage Guidance

When to Use

  • Use the Top App Bar at the top of all full screen views. Top App Bar content is critical both to moving throughout the app and orienting with a current experience.

When to Consider Something Else

  • Use a Modal Header (coming soon) for displaying navigation and titles at the top of modal views instead of a Top App Bar.

Examples

Sizing

The Top App Bar varies by size from large, medium, to small. Larger title treatments should be used on main app destinations and app home / parent pages to give more emphasis to users with medium and small variations being used within child and subpages. Though less common, medium variations are nice for giving child and subpages additional hierarchy and visual polish in a flow when needed.

Large, medium, and small Top App Bars compared side by side

Subtitles

The title may be configured to have a subtitle representative of a product area.

Example of a Top App Bar with a subtitile configuration above the main header

The presence of a Leading Navigation Icon Button varies by location in the app. Navigation in the main app destinations are controlled by the Bottom Navigation Bar. When the Bottom Navigation Bar is not available, the Back Navigation Icon Button should be present.

Mockup of a main app destination without leading navigation elements versus an App overview page Top App Bar with leading navigation elements

A dropdown on the title can be used in one of two ways:

  1. To switch the selected view on a page. A dropdown can be used instead of Tabs to organize related content that is at the same level of hierarchy. Like Tabs, switching the selection changes the view below it without leaving the page. An example is switching between incomplete and complete items in My Tasks. All views here share the same trailing actions.

MyTasks Top App Bar being used to deploy a menu to switch between Complete and Incomplete tasks

  1. To navigate to children pages. A dropdown can be used on an Overview page to reveal a menu for navigating to pages lower in its hierarchy. The user is “forward” navigated to a child page, and a Back Navigation Icon Button on the child page returns the user to the Overview. The dropdown menu is only displayed on the Overview page because children pages have their own unique Top App Bar. An example is in Hubs:

Manager Insights Hub Top App Bar dropdown being used to open a Top Sheet with a navigation menu Clicking on the Manager Insights Hub Top Sheet navigation menu to open a child page that does not contain the dropdown

Tabs

Tabs are another navigation element that allow users to easily access separate child areas of a parent page. Tabs are ideal for when a parent flow is made up of a small number of child pages of equal importance. Tabs belong on the page content rather than the Additional Content Slot within the Top App Bar which would remove their swipeable functionality.

Page view with Tabs located beneath the Top App Bar

Active Search, regardless if it is persistent or expandable, takes over functionality in the Top App Bar until it is dismissed by a user or a query is selected.

Mockup showing an active Search Input in the Top App Bar being closed to return to the regular page view with search concealed behind an expandable search icon

In addition to the typical expandable search pattern where search is triggered by an icon, the Top App Bar also has built-in support for persistent search in all variants. This is intended for instances where Search is the main and most critical functionality to a feature. The result of using persistent functionality is Search taking over the Top App Bar on scroll, even if it is not active.

Mockup showing a page with inactive persistent Search becoming active

Local Actions

To create more hierarchy between global and page actions, key page actions to an experience may be centralized in the Additional Content Slot in the Top App Bar. An example is combining existing filtering and sorting capabilities, where a descriptor can be added to the icon in the Button, and a Top Sheet used to keep actions as contextually relevant as possible.

Example of filtering and sorting button in the Additional Content Slot of the Top App Bar

In Tasks, another possible place for key page actions is the Action Bar with a related actions button.

Background

The Top App Bar supports a number of different background fills in order to better connect with the rest of the page and semantic messages.

Defaults

The Top App Bar is intended to blend with the page background in order to create unity, leaving pages feeling larger and more open. The two defaults currently supported for background color are French Vanilla 100 and Soap 200. Pages consisting of elements that require additional elevation such as Cards should use Soap 200 as a background fill to prevent the need for depth shadows that clutter the UI. Pages consisting of flatter elements that do not require additional elevation should use French Vanilla 100. Main app destinations and Hub parent overview pages tend to have a Soap 200 fill, while tasks and child pages in Hubs tend to have a French Vanilla 100 fill.

Pages with Top App Bars that blends in with the page content

Do

Unify the page by having the Top App Bar match the background fill color.

White pages with blue colored Top App Bars

Don't

Use a different color background fill to delineate the Top App Bar from the rest of the page, cluttering the UI and making the screen appear smaller than it is.

Others

The Top App Bar also currently supports Cinnamon and Sour Lemon 100 as a temporary fill to indicate state changes within a page.

White pages with blue colored Top App Bars

Behaviors

Overflow

When there are more than 2 trailing buttons in the small Top App Bar, Trailing Icon Buttons are placed in an overflow Menu along with their descriptors. A related actions icon is used to open the Menu in order to save space for the title.

Three actions located underneath a related actions icon in the small Top App Bar

In the larger variations of the Top App bar and in selection mode, up to 4 trailing actions, instead of 2, are supported before the overflow mechanism is automatically triggered.

Four actions being surfaced in the large Top App Bar

Titles should also always be designed to fit within their bounding box. In the event of globalization or metadata population issues, an ellipsis is used to truncate the title.

A title in a small Top App Bar being automatically truncated to fit within its bounding area

To avoid truncation on scroll, the Top App Bar can be configured to have a different, shorter title here. Users have already been oriented within a page, therefore the page title no longer needs to be as descriptive.

A page with the title "Manage Your Privacy Permissions" truncating to "Permissions" upon scroll

Scrolling

The Top App Bar is gesture responsive. Large and medium variants transition to the small Top App Bar with divider lines on scroll. The Additional Content Slot located beneath the title treatment disappears upon upward gesture but reappears with a downward gesture on the screen. Search is unique in that it is not dismissed with a gesture on its active state, only on its inactive state.

Active search becoming inactive with an upward or downward gesture Inactive Search Input leaves Top App Bar with an upward gesture, with a search icon appearing in the trailing area Downward gesture makes Additional Content Slot Pills reappear but not search

Page Errors

In the event of an error or other unexpected events such as losing service, the Top App Bar is compatible with Banner. Please note that the Banner will obscure any content in the Additional Content Slot.

Top App Bar with a Banner

On scroll, the Large or Medium variants automatically transition to the Small variant when the Banner appears so more screen real estate is freed for exploring the errors in context.

Selection Mode

For multi selection purposes, the Top App Bar supports a Selection Mode to visually indicate the number of selections users make. If no selections have been made, no number or title is displayed.

Top App Bar being used in a Top Sheet where an input on the screen is being selected and the header text reflecting that selection

Pressed States

All icons within the Top App bar are Large Tertiary Icon Buttons that support a pressed state.

Top App Bar showing all the pressed states on all of the icons

API Guidelines

Component Definition

TopAppBarHostingController initializers:

  public convenience init(
        featureData: FeatureMetricsData,
        rootView: PageContent,
        navBarConfig: any NavBarConfiguring,
        localizer: LocalizationAdapting
  )
  public convenience init(
        featureData: FeatureMetricsData,
        rootView: PageContent,
        navBarConfig: any NavBarConfiguring,
        contentSlot: ContentSlot,
        localizer: LocalizationAdapting
  )
  public convenience init(
        featureData: FeatureMetricsData,
        rootViewController: UIViewController,
        navBarConfig: any NavBarConfiguring,
        localizer: LocalizationAdapting
  )
  public convenience init(
        featureData: FeatureMetricsData,
        rootViewController: UIViewController,
        navBarConfig: any NavBarConfiguring,
        contentSlot: ContentSlot,
        localizer: LocalizationAdapting
  )

NavBarConfiguring definition:

public protocol NavBarConfiguring: ObservableObject, AnyObject {
  var title: String { get set }
  var rightBarButtonItems: [TopAppBarButtonIconModel] { get set }
  var size: NavBarSize { get set }
  var backButtonConfiguration: BackButtonConfig { get }
  var hideHomeButton: Bool { get set }
  var navBackgroundColor: TopAppBarBackgroundColor { get set }
  var showSearch: TopAppBarSearchVisibility { get set }
  var wantsPersistentSearchMode: Bool { get set }
  var additionalNavigationItems: [ContextMenuRowOptionModel] { get set }
  var selectionModeSelected: Int? { get set }
  var bannerConfig: TopAppBarBannerConfig { get set }
  var titlePublisher: Published<String>.Publisher { get }
  var rightBarButtonItemsPublisher: Published<[TopAppBarButtonIconModel]>.Publisher { get }
  var sizePublisher: Published<NavBarSize>.Publisher { get }
  var backButtonConfigurationPublisher: Published<BackButtonConfig>.Publisher { get }
  var hideHomeButtonPublisher: Published<Bool>.Publisher { get }
  var navBackgroundColorPublisher: Published<TopAppBarBackgroundColor>.Publisher { get }
  var showSearchPublisher: Published<TopAppBarSearchVisibility>.Publisher { get }
  var wantsPersistentSearchModePublisher: Published<Bool>.Publisher { get }
  var additionalNavigationItemsPublisher: Published<[ContextMenuRowOptionModel]>.Publisher { get }
  var selectionModeSelectedPublisher: Published<Int?>.Publisher { get }
  var bannerConfigPublisher: Published<TopAppBarBannerConfig>.Publisher { get }
}

Intended to be used as a wrapper around the page content. See the demo screen in DebugMAXTask as an example.

Parameters

TopAppBar Component parameters:

| Name | Description | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | --- | | featureData | the feature name/context and the screen ID in which the component appears | | rootViewController | UIViewController; if it is scrollable, this should conform to NavBarReferenceProtocol to enable the correct scrolling behavior. | | contentSlot | a SwiftUI view of a content slot. Allowed components are Banner, Menu, Top Sheet, and Carousel. See TopAppBarContentSlot protocol. | | | navBarConfig | an object of type NavBarConfiguring that communicates with TopAppBar for title, menu, buttons, etc. | | | localizer | Localizer for the component’s a11y labels. | | rootView | a SwiftUI view; if it is scrollable, this should conform to NavBarReferenceProtocol to enable the correct scrolling behavior. | |

NavBarConfiguring parameters:

| Name | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | | title | a String for the title at the top of the page | | rightBarButtonItems | an array of TopAppBarButtonIconModels to render the buttons on the trailing side of the navigation bar, with a callback when pressed. | | size | Small, medium, or large size options for TopAppBar’s title. | | backButtonConfiguration | a value of BackButtonConfig, either accepting the app’s Navigator’s back button or overriding with a custom back behavior. | | hideHomeButton | Boolean override the app’s Navigator’s home button visibility | | navBackgroundColor | a color from the TopAppBarBackgroundColor enum, which contains a subset of allowed colors. | | showSearch | a Boolean to toggle to indicate when TopAppBar should show a search bar; along with wantsPersistentSearchMode, determines where the search bar appears. Can also show a search with a filter button on the trailing side. | | | wantsPersistentSearchMode | a Boolean. When persistent is on, and showSearch is true, search appears beneath the title. If persistent search is off, search bar only appears in the navigation bar. | | additionalNavigationItems | an array of menu items. Populate this array if the title should have a dropdown menu. | | selectionModeSelected | an optional integer. Set to nil to exit selection mode | | bannerConfig | a TopAppBarBannerConfig type containing all info needed to populate a Banner component. |

Accessibility Guidelines

Coming soon

Content Guidelines

When writing content for Top App Bar, please refer to the Headings, Subheadings, and Titles section of Content’s UI Text recommendations.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.

FAQ Section

On this Page: