Lightning Components: Making a Path Responsive

Question

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:

Answer 1

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:

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