lightning:path (Beta)

A lightning:path component displays the progress of a process, which is based on the picklist field that's specified by Path Settings in Setup. The path is rendered as a horizontal bar with a chevron for each picklist item. The key fields and guidance for success are displayed below the path.

This example changes the path variant depending on which stage is clicked.

1<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" >
2    <aura:attribute name="variant" type="String" default="non-linear"/>
3    <aura:attribute name="hideUpdateButton" type="Boolean" default="false"/>
4    <lightning:path aura:id="path" recordId="{!v.recordId}"
5        variant="{!v.variant}"
6        hideUpdateButton="{!v.hideUpdateButton}"
7        onselect="{!c.handleSelect}"
8    />
9</aura:component>

The client-side controller displays a toast with the step name that's clicked.

1({
2    handleSelect : function (component, event, helper) {
3     var stepName = event.getParam("detail").value;
4     var toastEvent = $A.get("e.force:showToast");
5     toastEvent.setParams({
6       "title": "Success!",
7        "message": "Toast from " + stepName
8        });
9        toastEvent.fire();
10    }
11})

Usage Considerations

If an invalid attribute value is used, an error is displayed in place of the component.

Implementing the force:hasRecordId interfaces provides the record Id of the record that's currently viewed to the component. To make your component available in Lightning App Builder, implement the flexipage:availableForAllPageTypes interface, which enables admins to drag-and-drop the component onto a Lightning page easily.

To use a path component in the Salesforce app, display it in a custom tab.

Attributes