I want to display a field status in a very visual way, the path component is ideal (any of them, for example lightning:path or even the slds one):

enter image description here


Displaying that component from right to left (trying to change the dirhtml attribute) results:

enter image description here


<div dir="ltr">
    <lightning:picklistPath aura:id="picklistPath"

for changing from left-to-right to right-to-left I change the dir="ltr" to dir="rtl"


  1. Is there any way to show this path in rtl? (even a css solution would be great)
  2. If not - is there any other component or visual way to show all stages and emphasize your current stage?

If you are properly able to scope the CSS, you should maybe be able to apply a solution similar to reverse the order of div's children. Otherwise, this will require you code a custom component that fits your specific requirement.

modern browsers now support the following for reversing (mirroring) elements (using Flex):

#parent {
  display: flex;
  flex-direction: column-reverse;

I believe SLDS also has some reversing capabilities (if the child elements are in a grid) --> slds-grid_reverse

  • reversing the elements do not work on this component - direction here is within the component visually. I do not want to create my own custom component for that, I was wondering if there is a solution or maybe other visual component that can help me... – Itai Shmida Feb 22 '18 at 12:26
  • No out of the box solution to my knowledge – glls Feb 22 '18 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.