Path

Path

A process component communicates to the user the progress of a particular process.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-path-coach">
  <div class="slds-grid">
    <div class="slds-tabs_path" role="application">
      <ul class="slds-tabs_path__nav" role="listbox" aria-orientation="horizontal">
        <li class="slds-tabs_path__item slds-is-complete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs_path__title">Contacted</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-complete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs_path__title">Open</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-current" role="presentation">
          <a aria-selected="true" class="slds-tabs_path__link" href="javascript:void(0);" id="path-3" role="option" tabindex="0">
            <span class="slds-tabs_path__stage">
              <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>
              <span class="slds-assistive-text">Current Stage:</span>
            </span>
            <span class="slds-tabs_path__title">Unqualified</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-incomplete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-4" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>
            </span>
            <span class="slds-tabs_path__title">Nurturing</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-incomplete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-5" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>
            </span>
            <span class="slds-tabs_path__title">Closed</span>
          </a>
        </li>
      </ul>
    </div>
    <button class="slds-button slds-button_brand slds-path__mark-complete slds-no-flex slds-m-horizontal_small">
      <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
      </svg>Mark Status as Complete</button>
  </div>
</div>

About Path

Accessibility

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

On the other hand, if a Sales Path doesn’t have 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 Node Without Coaching With Coaching
.slds-tabs--pathnav role="listbox" role="tabset"
.slds-tabs--pathlink role="option" role="tab"

Notable Attributes - Without Coaching

  • aria-orientation="horizontal" should be applied to the slds-tabs--path__nav element to indicate to the user to use horizontal navigation
  • aria-selected="true" should be applied to the selected Sales Stage as you navigate through the Stages

Notable Attributes - With Coaching

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

Keyboard navigation

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

Overview of CSS Classes

Selector.slds-path-coach
Summary
Restrictdiv
VariantTrue
Selector.slds-tabs_path
Summary

Creates the container for tabs in a path

Restrict.slds-path-coach div
Selector.slds-tabs_path__nav
Summary

Horizontal list of stages in path component

Restrict.slds-tabs_path ul
Selector.slds-tabs_path__item
Summary

Individual stages of a path

Restrict.slds-tabs_path__nav li
Selector.slds-is-complete
Summary

Creates the completed stage of the path

Restrict.slds-tabs_path__item
ModifierTrue
Selector.slds-is-current
Summary

Creates the current stage of the path

Restrict.slds-tabs_path__item
ModifierTrue
Selector.slds-is-incomplete
Summary

Creates the incomplete stage of the path

Restrict.slds-tabs_path__item
ModifierTrue
Selector.slds-is-lost
Summary

Creates lost stage of the path

Restrict.slds-tabs_path__item
ModifierTrue
Selector.slds-is-active
Summary

Creates the active stage of the sales path

Restrict.slds-tabs_path__item
ModifierTrue
Selector.slds-is-won
Summary

Creates success stage of the path

Restrict.slds-tabs_path__item
ModifierTrue
Selector.slds-tabs_path__link
Summary

Creates actionable element inside of each path tab

Restrict.slds-tabs_path__item a
Selector.slds-tabs_path__title
Summary

Contains the name of the stage

Restrict.slds-tabs_path__link span
Selector.slds-tabs_path__stage
Summary

Contains the check mark when the stage is completed

Restrict.slds-tabs_path__link span
Selector.slds-path__trigger
Summary

Button that toggles visibility of stage's tabpanel

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

Actionable button that invokes a completion of the path

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

Actionable button that invokes a current stage of the path

Restrict.slds-path-coach button
Selector.slds-tabs_path__content
Summary

Tabpanel of each stage of the path

Restrict.slds-path-coach div
Selector.slds-coach__keys
Summary

Key field section of expanded tabpanel

Restrict.slds-tabs_path__content div
Selector.slds-coach__item
Summary

Name or label of name/value pair inside of key fields section

Restrict.slds-coach__keys dt
Selector.slds-coach__value
Summary

Value of name/value pair inside of key fields section

Restrict.slds-coach__keys dd
Selector.slds-coach__guidance
Summary

Guidance section of expanded tabpanel

Restrict.slds-tabs_path__content div