Path
- HTML/CSS:In Progress (1 of 3 variants)
- Layout:Responsive
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 Node | Without Coaching | With Coaching |
---|---|---|
.slds-path__nav | role="listbox" | role="tabset" |
.slds-path__link | role="option" | role="tab" |
Without Coaching#
aria-orientation="horizontal"
should be applied to theslds-path__nav
element to indicate to the screen reader to use horizontal navigationaria-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 eachslds-path__link
Tab - When the Path Stage Coaching is visible,
aria-expanded
should be set totrue
aria-selected="true"
is used to describe the currently activeslds-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
andright
arrow keys move focus and selection, witharia-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#
<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#
<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#
Key Fields This Stage
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#
Key Fields This Stage
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
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
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-path |
---|---|
Summary | |
Support | dev-ready |
Restrict | div |
Variant | True |
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 |
Restrict | div |
Variant | True |
Selector | .slds-region_small |
---|---|
Summary | This class should be placed on a containing div when the Path container is between 360px and 564px |
Restrict | div |
Variant | True |
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"
fromslds-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 theslds-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 forslds-path__trigger
, and instead use our new classslds-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