Step bar
ready

Introduction

Step bar that automatically scales with the number of steps. If the browser does not support flex, the component gracefully falls back to a stacked view.

Notes

Although this component does scale down, it can be quite wide and unpredictable. Rather hide the step-bar on mobile, and replace it with a simplified nav as per the example below.

Examples

Step bar

<nav class="block-visible-small">
      <ol class="step-bar">
          <li class="step-bar__step is-complete">
            <div class="step-bar__step-marker"></div>
            Step 1
          </li>
          <li class="step-bar__step is-active">
            <div class="step-bar__step-marker"></div>
            Step 2
          </li>
          <li class="step-bar__step">
            <div class="step-bar__step-marker"></div>
            Step 3
          </li>
          <li class="step-bar__step">
            <div class="step-bar__step-marker"></div>
            Step 4
          </li>
      </ol>
    </nav>
    
    <nav class="block-hidden-small">
      <h2 class="heading heading--4">
        Step 2 of 4: Step 2
      </h2>
    </nav>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_step-bar.scss

Usage

Class/JavaScript Hook Description Required?
.step-bar Placed on the outermost tag that will contain all the step elements Required
.step-bar__step This will contain the step's name. Required.
.step-bar__step-marker Placed inside a step-bar__step element to create the round marker Required.
.is-active Placed on step-bar__step to mark the step as the active/current step Optional.
.is-complete Placed on step-bar__step to mark the step as being completed (with a little check mark) Optional.