Workspace / App Shells

Breadcrumb App Shell

The reusable app shell for breadcrumb style navigation for Workspace Experiences built in UI Builder.

 

Overview

  • Release version
    Yokohama
  • Available sinceRome
  • A11YNot compliant
ServiceNow link
Breadcrumb App Shell code documentation

UIB and developer guidance

Figma link
Breadcrumb App Shell Figma component

Figma library with components for designing Workspace.

Anatomy

  1. Experience header: The page header; contains the global search, notifications and user menu
  2. Breadcrumbs: The breadcrumbs component; helps users keep track of their current location as they navigate through pages
  3. Primary navigation bar: Also known as the L1 navigation bar; holds page icons that, when selected, open the corresponding page

Usage

The breadcrumb app shell can be used for focused workflows and wizard flows that don’t require multi-tasking. It can be used instead of the Agent Workspace app shell if breadcrumbs are preferred over tabs for your use case.

Components

The breadcrumb app shell is built with Next Experience components that have their own attributes and interactions.

The global search component enables a user to search across all record types in Workspace.

Interactions and behaviors
  • On click, search input expands and search popover is displayed with a “Search All Records” link.
  • After the first character is entered, the search popver will display any recently searched terms or recently viewed records (up to 5 each).
  • Search popover will display an “exact match” result when searching for a record that matches exactly.
  • Selecting the “Search All Records” link in the search popover or using the Enter key will launch the Search Results page in a drilldown breadcrumb and the search input will remain open. If nothing was typed in the search input and focus moves off the input, the search input will automatically collapse back to just the global search icon.
Defaults

By default the global search component displays these attributes:

  • Global search results include Cases, Customers or Users, Now Community Questions, Incidents, Change Requests, Problems, and Knowledge Articles.
  • Recent items are stored for 30 days.

Notifications

This component displays notifications to users when there are updates to important records.

Interactions and behaviors
  • Displays badge with count of unread notifications.
  • Badge is removed when the button is clicked and the “notification tray” is opened.
  • The notification tray slides out from the right and overlays the page content.
  • The tray can contain only 1 notification per record.
  • If the same record is updated twice in one day, the first notification is removed with the arrival of the second notification.
  • The “notification toast” is a small card that appears over the page content when a new notification is triggered.
Defaults

By default the notifications component displays these attributes:

  • Notification toasts are enabled.
  • Badge count is enabled.

User menu

The user menu provides access to a user’s display preference, notification preferences, and the option to log out.

Interactions and behaviors
  • On click, the user menu popover appears.
  • The settings section of the user menu contains a list of toggleable component display and notification preferences, such as “Show Ribbon,” “Wrap List Text,” and “Show Badge Count.”
  • For users with rights to configure Workspace or pages, clicking “Configure Workspace” provides access to UI Builder.
Defaults

By default, all setting preferences in the user menu are set to “on” (toggle pushed to the right and displaying a green fill) except for “Wrap List Text.”

Primary navigation bar

The primary navigation bar holds primary workflows. Workflows are curated collections of pages that correspond to a sequence of activities. Pages that can be added to your primary navigation bar include:

  • Landing Page
  • Channels and Queues
  • Schedule
  • Teams
  • Coaching
  • Lists
Interactions and behaviors
  • Selecting any individual page icon in the primary navigation bar launches that page.
Defaults

By default, when the Lists page is opened, the first filtered list is automatically selected.

Configurations

You can toggle the user menu settings to configure your app shell display preferences. You can also add workflows to your primary navigation bar. For more information on creating workflows, see the Create a workflow documentation.

When constructing your pages in UI Builder, consider using page layouts to arrange your components on the page.

Variants

This app shell doesn’t have any specific variants; however, the breadcrumbs component has 4 variants.

See usage guidance for breadcrumbs

Behaviors

App shells don’t have any specific behaviors. However, their subcomponents can have their own behaviors.
For more information on the breadcrumb component’s states, responsive behaviors, interactions and truncation behavior:

See usage guidance for breadcrumbs

Usability

The breadcrumb app shell complies with all internationalization and accessibility requirements. 

Internationalization

When the breadcrumb app shell is used in a platform configured for a right-to-left (RTL) language, the subpage links and the separators flip to align to the right. 

Accessibility

Learn how to access the actionable elements of the breadcrumbs app shell through keyboard interactions and screen readers. 

Keyboard interactions

You can access the actionable elements of app shell with breadcrumb navigation with these keyboard keys:  

  • Tab: Moves between breadcrumb links in the direction of the presentation language
  • Shift + Tab: Moves focus back to the previous link
  • Enter: Opens the page in the breadcrumb link

When the focus is on the control for the overflow menu:

  • Enter: Opens the overflow menu
  • Arrow up and Arrow down: Moves focus up and down through the links in the overflow menu
  • Enter: Opens the link for an item in the menu

For accessibility behaviors of specific components, see the usage guidelines for those components.