1

I need make a path responsive, and smaller. I copied this example of the SLDS documentation:

https://www.lightningdesignsystem.com/components/path/#site-main-content

I need to include this component (showing the stages) in another custom component, so I need reduce the size and make it responsive.

Adding the width style attribute doesn't work. I don't know how reduce the width.

<article>
    <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>
                    </a>
                </li>
                <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>
                    </a>
                </li>
                <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>
                    </a>
                </li>
                <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>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</article>

The image is:

enter image description here

4

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"/>
</lightning:progressIndicator>

Renders as:

Response_Path

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

0

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.