Screen Breadcrumb

Screen Breadcrumb displays a list (or breadcrumb trail) of one or more sequential screens. It acts a secondary navigational aid to orient users where they are in an experience task.

  • Usage
  • Configuration
  • Examples

Screen Breadcrumb offers an efficient, always-available navigation tool within an experience task. It is used at the top of most secondary screens with the Screen Header. Screen breadcrumbs take up minimal screen space in pattern that's familiar to most users and answers the following questions:

  • Where am I? The breadcrumb path informs users of their current location in relation to the larger task hierarchy.

  • Where can I go? Breadcrumbs allow users to navigate across screens without having to leave the task (e.g. returning to a top-level screen).

Anatomy

  1. Screen label

  2. Separator

Best practices

  • The screen name in the breadcrumb should match the screen title defined in the Screen Header.
  • Use breadcrumbs as a secondary or alternative means of navigating between screens. Don't use breadcrumbs as a replacement for the primary navigation.
  • Avoid overly long breadcrumb paths.
  • Breadcrumbs work best on secondary screens for tasks with logical hierarchical navigations. Don't use breadcrumbs for top-level screens or for single-level tasks that don't have a hierarchy of screens.
  • The last item in the breadcrumb path should be the current page the user is on and formatted in plain text (i.e. not a clickable link). This gives users immediate confirmation of where they are within the experience task and provides consistency across the screens.

Do

Make the last item the current screen the user is on.

Don't

Link the screen users are currently on.

Properties

  • Screens section – Required. The array of screens to include in the breadcrumb:
    • Label field – Required. The label that displays for the screen.
    • Route field – Optional. Specifies the route to the screen. If provided, the Label displays as a link.

With linked display

  • For first screen in Screens array:
    • Label included.
    • Route set.
  • For second screen in Screens array:
    • Label included.
    • Route not set.