Component Blueprints

Path

The Path communicates to the user the progress of a particular process.

About Path#

Accessibility#

This component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it's associated content changes with it.

On the other hand, if a Path doesn't have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component.

The markup structure is identical, just some attributes change their values.

DOM NodeWithout CoachingWith Coaching
.slds-path__navrole="listbox"role="tabset"
.slds-path__linkrole="option"role="tab"

Without Coaching#

  • aria-orientation="horizontal" should be applied to the slds-path__nav element to indicate to the screen reader to use horizontal navigation
  • aria-selected="true" should be applied to the selected Stage of the Path as you navigate through the Stages

With Coaching#

  • When the Path Stage Coaching is not visible, aria-expanded="false" should be set on each slds-path__link Tab
  • When the Path Stage Coaching is visible, aria-expanded should be set to true
  • aria-selected="true" is used to describe the currently active slds-path__link Tab, not the Stage the Path is currently set to

Keyboard Navigation#

  • For both with and without Path Stage Coaching variants, the following keyboard navigation applies
  • left and right arrow keys move focus and selection, with aria-selected="true"

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, elements of path will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Examples#

Base#

Stage: Unqualified
<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

In a later stage#

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

With different stage selected#

Stage: Unqualified
<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

With visible tooltip#

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

With coaching available#

Stage: Unqualified

Key Fields This Stage

Expected Budget
$10,000
Lead Source
Marketing and Web Referral
Support Engineer
Jane Authur

Guidance for Success

Regularly cross-sell related products using cross-sell tactics and principles.

Prepare demo deck using the latest template and review with Marketing and Sales teams. Review demo copy with Legal and Doc team.

Look up needs analysis principles and review selling plan with Sales Engineer.

<div class="slds-path slds-path_has-coaching">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-path__trigger" title="Toggle Sales Coaching" aria-expanded="false" aria-controls="path-coaching-1">

With different stage selected - with coaching#

Stage: Unqualified

Key Fields This Stage

Expected Budget
$10,000
Lead Source
Marketing and Web Referral
Support Engineer
Jane Authur

Guidance for Success

Regularly cross-sell related products using cross-sell tactics and principles.

Prepare demo deck using the latest template and review with Marketing and Sales teams. Review demo copy with Legal and Doc team.

Look up needs analysis principles and review selling plan with Sales Engineer.

<div class="slds-path slds-path_has-coaching slds-is-expanded">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-path__trigger slds-path__trigger_open" title="Toggle Sales Coaching" aria-expanded="true" aria-controls="path-coaching-2">

Lost#

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

Won#

<div class="slds-path">
  <div class="slds-grid slds-path__track">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

Path with overflow#

<div class="slds-path">
  <div class="slds-grid slds-path__track slds-has-overflow">
    <div class="slds-grid slds-path__scroller-container">
      <div class="slds-path__scroller">

Layout overrides#

When the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class .slds-region_small should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class .slds-region_medium should be applied.

Medium layout#

With the class .slds-region_medium applied to the container.

<div class="slds-region_medium" style="width:700px">
  <div class="slds-path">
    <div class="slds-grid slds-path__track">
      <div class="slds-grid slds-path__scroller-container">

Medium layout with coaching#

With the class .slds-region_medium applied to the container.

Key Fields This Stage

Expected Budget
$10,000
Lead Source
Marketing and Web Referral
Support Engineer
Jane Authur

Guidance for Success

Regularly cross-sell related products using cross-sell tactics and principles.

Prepare demo deck using the latest template and review with Marketing and Sales teams. Review demo copy with Legal and Doc team.

Look up needs analysis principles and review selling plan with Sales Engineer.

<div class="slds-region_medium" style="width:700px">
  <div class="slds-path slds-path_has-coaching slds-is-expanded">
    <div class="slds-grid slds-path__track slds-has-overflow">
      <div class="slds-grid slds-path__scroller-container">

Small layout#

With the class .slds-region_small applied to the container.

Key Fields This Stage

Expected Budget
$10,000
Lead Source
Marketing and Web Referral
Support Engineer
Jane Authur

Guidance for Success

Regularly cross-sell related products using cross-sell tactics and principles.

Prepare demo deck using the latest template and review with Marketing and Sales teams. Review demo copy with Legal and Doc team.

Look up needs analysis principles and review selling plan with Sales Engineer.

<div class="slds-region_small" style="width:360px">
  <div class="slds-path slds-path_has-coaching slds-is-expanded">
    <div class="slds-grid slds-path__track slds-has-overflow">
      <div class="slds-grid slds-path__scroller-container">

Overview of CSS Classes#

Selector.slds-path
Summary
Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-is-expanded
Summary

Indicates the coaching section is expanded

Restrict.slds-path
Selector.slds-path__track
Summary

Allows the path itself to be responsive

Restrict.slds-path div
Selector.slds-has-overflow
Summary

Indicates the scroller is in the overflow state

Restrict.slds-path__track
Selector.slds-path__scroller
Summary

Creates the scrolling container for tab overflow

Restrict.slds-path__track div
Selector.slds-path__scroller_inner
Summary

Allows the path to scroll when necessary

Restrict.slds-path__scroller div
Selector.slds-path__nav
Summary

Horizontal list of stages in path component

Restrict.slds-path__scroller_inner ul
Selector.slds-path__item
Summary

Individual stages of a path

Restrict.slds-path__nav li
Selector.slds-is-incomplete
Summary

Creates the incomplete stage of the path

Restrict.slds-path__item
Selector.slds-is-complete
Summary

Creates the completed stage of the path

Restrict.slds-path__item
Selector.slds-is-current
Summary

Creates the current stage of the path

Restrict.slds-path__item
Selector.slds-is-active
Summary

Creates the active stage of the sales path

Restrict.slds-path__item
Selector.slds-is-lost
Summary

Creates lost stage of the path

Restrict.slds-path__item
Selector.slds-is-won
Summary

Creates success stage of the path

Restrict.slds-path__item
Selector.slds-path__link
Summary

Creates actionable element inside of each path item

Restrict.slds-path__item a
Selector.slds-path__title
Summary

Contains the name of the stage

Restrict.slds-path__link span
Selector.slds-path__stage
Summary

Contains the check mark when the stage is completed

Restrict.slds-path__link span
Selector.slds-path__scroll-controls
Summary

Container for the buttons that control the scrolling

Restrict.slds-path__track div
Selector.slds-path__stage-name
Summary

Shows the stage name when in the smaller state

Restrict.slds-path__track span
Selector.slds-path__scroller-container
Summary

Creates the container for toggle button and path

Restrict.slds-path div
Selector.slds-path__action
Summary

Container for path actions

Restrict.slds-path div
Selector.slds-path__trigger-coaching-content
Summary

This class is used to create a full width coaching toggle in small regions

Restrict.slds-path__action button
Selector.slds-path__trigger
Summary

Button that toggles visibility of stage's tabpanel

Restrict.slds-path button
Selector.slds-path__mark-complete
Summary

Actionable button that invokes a completion of the path

Restrict.slds-path button
Selector.slds-path__mark-current
Summary

Actionable button that invokes a current stage of the path

Restrict.slds-path button, .slds-path-coach button
Selector.slds-path__content
Summary

Tabpanel of each stage of the path

Restrict.slds-path div
Selector.slds-path__guidance
Summary

Guidance section of expanded tabpanel

Restrict.slds-path__content div
Selector.slds-path__coach-title
Summary

This creates the underlined titles in the coaching area

Restrict.slds-path__keys div, .slds-path__guidance h2
Selector.slds-path__coach-edit
Summary

The Edit link in Path Coaching

Restrict.slds-path__coach-title button
Selector.slds-path__guidance-content
Summary

This creates the space at the top of the guidance area

Restrict.slds-path__guidance div
Selector.slds-path__keys
Summary

Key field section of expanded tabpanel

Restrict.slds-path__content div
Selector.slds-path__coach-title
Summary

This creates the underlined titles in the coaching area

Restrict.slds-path__keys div, .slds-path__guidance h2
Selector.slds-path__coach-edit
Summary

The Edit link in Path Coaching

Restrict.slds-path__coach-title button
Selector.slds-path__coach
Summary

This creates the layout block for the coaching area

Restrict.slds-path__content div
Selector.slds-region_medium
Summary

This class should be placed on a containing div when the Path container is between 565px and 1280px

Restrictdiv
VariantTrue
Selector.slds-region_small
Summary

This class should be placed on a containing div when the Path container is between 360px and 564px

Restrictdiv
VariantTrue

Path Release Notes

2.21.0

Added

  • Added aria-labelledby to meet accessibility requirements specifically for screen readers.

2.13.0

Changed

  • Removed role="application" from slds-path__scroller.

2.11.5

Added

  • Added documentation and examples for mobile/touch context

2.10.0

Changed

  • For touch devices, increased the height and tap target size of the path component to $height-tappable (2.75rem)

Fixed

  • Fixed text disappearing when peaking between stage in Safari

2.9.0

Added

  • Added slds-path__trigger-coaching-content to create a full width coaching toggle in small regions.

Changed

  • Padding has been removed from slds-path__track to fix display issues when the Path is nested inside of a Card; of which is it's default state.
  • Modified to be mobile first and responsive.
  • Changed border radius to make circle and pill shaped buttons to square and rectangular shape.
  • Removed horizontal rule under coaching title areas

Fixed

  • Flipped chevrons for RTL languages

2.8.0

Changed

  • Increased font size to 14px, applied bold font weight, and removed uppercase styling in slds-path__coach-title.

2.7.0

Added

  • Added slds-path_has-coaching hook on the slds-path container element, to add support for spacing differences between coaching and non-coaching.

Changed

  • Modified the appearance of the Path container.
  • Revised the colors used on the active and curent Path steps, introducing support for borders.
  • Replaced spacing tokens with variable spacing tokens to respond to a user's densification setting.
  • Changed the direction of the coaching arrow to point to the right / down, instead of up / down. To take advantage of this change, remove the slds-flip_vertical class on the open state for slds-path__trigger, and instead use our new class slds-path__trigger_open to set the direction of the open state on the button arrow.

Fixed

  • Fixed text centering issue with first and last Path steps
  • Fixed rotation transition on Path coaching toggle button