lightning:path (Beta)

Displays a path driven by a picklist field and Path Setup metadata. This component requires API 41.0 and later.

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.

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

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

({
    handleSelect : function (component, event, helper) {
     var stepName = event.getParam("detail").value;
     var toastEvent = $A.get("e.force:showToast");
     toastEvent.setParams({
       "title": "Success!",
        "message": "Toast from " + stepName
        });
        toastEvent.fire();
    }
})

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

Attribute Name Attribute type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
recordId String The record's ID
variant String Changes the appearance of the path. Choose between linear and non-linear formats. In linear paths, completed steps show a checkmark. In non-linear paths, completed steps show the step name. We show linear paths by default.
hideUpdateButton Boolean Specified whether the Mark Complete button is displayed next to the path. If true, the button is not displayed. The Mark Complete button is displayed by default.
onselect Action The action triggered when a step on the path is clicked.