Custom Lightning Path in Lightning Web Component

Hello friends, Wish you all a very happy new year!!. This is my first post of this new year 2022. In this post you will seen a web component example that helps you to create a custom lightning path. You can easily used this component in your business requirements. so let's get started.

Custom lightning path in lightning web component

In this web component, I used lightning-progress-indicator component to build the path.

CustomLightningPath.html

 <template>
  <lightning-card title="Lightning Path" icon-name="standard:sales_path">
	<lightning-progress-indicator current-step={currentvalue} type="path" variant="base">
		<lightning-progress-step label="Contacted" value="1" onclick={pathHandler}></lightning-progress-step>
		<lightning-progress-step label="Open" value="2" onclick={pathHandler}></lightning-progress-step>
		<lightning-progress-step label="Unqualified" value="3" onclick={pathHandler}></lightning-progress-step>
		<lightning-progress-step label="Nurturing" value="4" onclick={pathHandler}></lightning-progress-step>
		<lightning-progress-step label="Closed" value="5" onclick={pathHandler}></lightning-progress-step>
	</lightning-progress-indicator>
	<br>
		Selected Value is : <b>{selectedvalue}</b>
	</lightning-card>
 </template>

CustomLightningPath.js

 import { LightningElement } from 'lwc';
 export default class CustomLightningPath extends LightningElement {
    currentvalue = '1';
    selectedvalue = 'Contacted';
    pathHandler(event) {
        let targetValue = event.currentTarget.value;
        let selectedvalue = event.currentTarget.label;
        this.currentvalue = targetValue;
        this.selectedvalue = selectedvalue;
    }
 }

CustomLightningPath.js-meta.xml

 <?xml version="1.0"?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__AppPage</target>
		<target>lightning__HomePage</target>
	</targets>
 </LightningComponentBundle>

Output:

 Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.