I need make a Path responsive, and smaller. I copy this example of the SLDS documentation: https://www.lightningdesignsystem.com/components/path/#site-main-content I need to include this component (shows the stages) in a other custom component, so I need reduce the size and make it responsive.

style Width not works, I dont know how reduce it.


        <div class="slds-grid slds-path__track">
            <div class="slds-grid">
                <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
                    <li class="slds-path__item slds-is-current slds-is-active" role="presentation">
                        <a aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-0" role="option" tabindex="0">
                            <span class="slds-path__title">Beginner</span>
                    <li class="slds-path__item slds-is-current slds-is-active" role="presentation">
                        <a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="1">
                            <span class="slds-path__title">Intermediate</span>
                    <li class="slds-path__item slds-is-current slds-is-active" role="presentation">
                        <a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="2">
                            <span class="slds-path__title">Advance</span>
                    <li class="slds-path__item slds-is-incomplete tamAnch" role="presentation">
                        <a aria-selected="false" class="slds-path__link" href="javascript:void(0);" id="path-5" role="option" tabindex="5">
                            <span class="slds-path__title">Expert</span>

The image is:

enter image description here


For Aura Components, the following provides a path that responds to the width of its container:

<lightning:progressIndicator type="path" variant="base" currentStep="2" >
    <lightning:progressStep label="Beginner" value="0"/>
    <lightning:progressStep label="Intermediate" value="1"/>
    <lightning:progressStep label="Advanced" value="2"/>
    <lightning:progressStep label="Expert" value="3"/>

Renders as:


This works well on large-to-midsize screens.

Note that paths, out of the box, are not intrinsically well-suited to phone-sized screens. Even if you ditch pre-built components and create something completely custom, on a small screen you could be forced to decide between bad UX options, such as:

  • Using text overflow, which at a certain point will make the path steps unreadable
  • Shrinking the font size -- again, this will make it unreadable at a certain point
  • Wrapping path steps onto a new line -- just plain poor design

See https://developer.salesforce.com/docs/component-library/bundle/lightning:progressIndicator/example

| improve this answer | |

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.