Change color and stage of Lightning Path Component with javascript controller and CSS

11:20 PM

Lightning Design System Link: Click here


Create a Lightning Component 'lightningPathExample.cmp' with the following code.

  • Note that each li tag represents a path and in our example has three paths hence three li tag's. Also note that each li tag has a aura:id attribute. We will use this in javascript to mark a path as complete or incomplete
Now, let's add a javascript function to mark step one as complete and step two as current. We will call this javascript function from a lightning button. Add the following code to the 'lightningPathExampleController.js'




Now, let's add some coloring and change the current path to orange. We will also change the complete path to gray.


Add the following CSS code to 'lightningPathExample.css'



Share This Story

Tags: ,

4 comments

  1. SAI KRISHNA TEJANovember 20, 2019 at 11:36 PM


    hI, can you provide code for this ? saiteja.raidu@gmail.com

    ReplyDelete
  2. UnknownJanuary 7, 2021 at 7:07 AM

    Can you please help me with code. I have requirement to change Lightning path border, color and Background

    ReplyDelete
  3. SankarOctober 19, 2026 at 10:09 AM

    The tutorial provides a practical example of customizing the Salesforce Lightning Path component using JavaScript controllers and CSS. Dynamically updating the current and completed stages helps developers create more interactive interfaces and communicate progress clearly to users. The use of Aura component IDs to identify individual path stages is a useful technique for understanding component-level manipulation.

    Understanding JavaScript controllers, DOM-related concepts, and CSS styling is valuable when developing interactive web applications. Developers looking to strengthen their programming skills can explore Javascript Online Training in India to build a solid foundation in JavaScript.

    ReplyDelete
  4. SankarOctober 19, 2026 at 10:09 AM

    The example also demonstrates how a button-triggered action can update the visual state of a component. Learners who want to develop a deeper understanding of JavaScript functions and event handling can refer to Javascript Online Course in India.

    ReplyDelete