step indicator

A step indicator is useful to show the use the current step of a procedure, e.g. split up form fields at a registration.

The Step indicator comes in three variants:

numbered steps and label
icons as steps and label
small steps, which have no number or icon, and label
small steps, which have no number or icon, and without label

The last variant of small items without label, is very useful on smaller viewports.

When using the numbered steps, the maximum number should not pass 99.

small variant

To use the small variant, the modifier class -small needs to be put on the most outer container of the step indicator m-step-indicator

active steps

To active a step, the modifier class -active needs to be put on the related step m-step-indicator__step

table of content

description
component variations
demo code
style scss

component variations

Step indicator

Open on blank page

1
lorem ipsum
2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
3
lorem ipsum

<div class="m-step-indicator">
  <ul class="m-step-indicator__steps">
    <li class="m-step-indicator__step -active">
      <div class="m-step-indicator__node">1</div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">2</div>
      <span class="m-step-indicator__label">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      </span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">3</div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
  </ul>
</div>

Step indicator 5 steps

Open on blank page

1
lorem ipsum dolor
2
lorem ipsum
3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
4
lorem
5
lorem ipsum

<div class="m-step-indicator">
  <ul class="m-step-indicator__steps">
    <li class="m-step-indicator__step -active">
      <div class="m-step-indicator__node">1</div>
      <span class="m-step-indicator__label">lorem ipsum dolor</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">2</div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">3</div>
      <span class="m-step-indicator__label">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      </span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">4</div>
      <span class="m-step-indicator__label">lorem</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">5</div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
  </ul>
</div>

Step indicator 5 steps icons only

Open on blank page

lorem ipsum dolor
lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
lorem
lorem ipsum

<div class="m-step-indicator">
  <ul class="m-step-indicator__steps">
    <li class="m-step-indicator__step -active">
      <div class="m-step-indicator__node">
        <i class="a-icon boschicon-bosch-ic-address-consumer-data"></i>
      </div>
      <span class="m-step-indicator__label">lorem ipsum dolor</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">
        <i class="a-icon boschicon-bosch-ic-info-i"></i>
      </div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">
        <i class="a-icon boschicon-bosch-ic-calendar"></i>
      </div>
      <span class="m-step-indicator__label">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      </span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">
        <i class="a-icon boschicon-bosch-ic-document-save-to"></i>
      </div>
      <span class="m-step-indicator__label">lorem</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node">
        <i class="a-icon boschicon-bosch-ic-refresh"></i>
      </div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
  </ul>
</div>

Step indicator small 8 steps

Open on blank page

lorem ipsum dolor
lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
lorem
lorem
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
lorem
lorem ipsum

<div class="m-step-indicator -small">
  <ul class="m-step-indicator__steps">
    <li class="m-step-indicator__step -active">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">lorem ipsum dolor</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      </span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">lorem</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">lorem</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
      </span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">lorem</span>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
      <span class="m-step-indicator__label">lorem ipsum</span>
    </li>
  </ul>
</div>

Step indicator small 8 steps without labels

Open on blank page

<div class="m-step-indicator -small">
  <ul class="m-step-indicator__steps">
    <li class="m-step-indicator__step -active">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
    <li class="m-step-indicator__step">
      <div class="m-step-indicator__node"></div>
    </li>
  </ul>
</div>

Step indicator 5 steps demonstrator

Open on blank page

1
lorem ipsum dolor
2
lorem ipsum
3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
4
lorem
5
lorem ipsum

<div class="frontend-kit-example__step-indicator-example">
  <div class="m-step-indicator">
    <ul class="m-step-indicator__steps">
      <li class="m-step-indicator__step -active">
        <div class="m-step-indicator__node">1</div>
        <span class="m-step-indicator__label">lorem ipsum dolor</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">2</div>
        <span class="m-step-indicator__label">lorem ipsum</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">3</div>
        <span class="m-step-indicator__label">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
        </span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">4</div>
        <span class="m-step-indicator__label">lorem</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">5</div>
        <span class="m-step-indicator__label">lorem ipsum</span>
      </li>
    </ul>
  </div>
  <div
    class="step-indicator__controls"
    style="display:flex;justify-content:space-between;margin-top:1rem"
  >
    <button
      type="button"
      class="a-button a-button--secondary -without-icon step-indicator__prev"
    >
      <span class="a-button__label">Previous step</span>
    </button>
    <button
      type="button"
      class="a-button a-button--primary -without-icon step-indicator__next"
    >
      <span class="a-button__label">Next step</span>
    </button>
  </div>
</div>

Step indicator 5 steps icons only demonstrator

Open on blank page

lorem ipsum dolor
lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
lorem
lorem ipsum

<div class="frontend-kit-example__step-indicator-example">
  <div class="m-step-indicator">
    <ul class="m-step-indicator__steps">
      <li class="m-step-indicator__step -active">
        <div class="m-step-indicator__node">
          <i class="a-icon boschicon-bosch-ic-address-consumer-data"></i>
        </div>
        <span class="m-step-indicator__label">lorem ipsum dolor</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">
          <i class="a-icon boschicon-bosch-ic-info-i"></i>
        </div>
        <span class="m-step-indicator__label">lorem ipsum</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">
          <i class="a-icon boschicon-bosch-ic-calendar"></i>
        </div>
        <span class="m-step-indicator__label">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
        </span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">
          <i class="a-icon boschicon-bosch-ic-document-save-to"></i>
        </div>
        <span class="m-step-indicator__label">lorem</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node">
          <i class="a-icon boschicon-bosch-ic-refresh"></i>
        </div>
        <span class="m-step-indicator__label">lorem ipsum</span>
      </li>
    </ul>
  </div>
  <div
    class="step-indicator__controls"
    style="display:flex;justify-content:space-between;margin-top:1rem"
  >
    <button
      type="button"
      class="a-button a-button--secondary -without-icon step-indicator__prev"
    >
      <span class="a-button__label">Previous step</span>
    </button>
    <button
      type="button"
      class="a-button a-button--primary -without-icon step-indicator__next"
    >
      <span class="a-button__label">Next step</span>
    </button>
  </div>
</div>

Step indicator small 8 steps demonstrator

Open on blank page

lorem ipsum dolor
lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
lorem
lorem
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
lorem
lorem ipsum

<div class="frontend-kit-example__step-indicator-example">
  <div class="m-step-indicator -small">
    <ul class="m-step-indicator__steps">
      <li class="m-step-indicator__step -active">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">lorem ipsum dolor</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">lorem ipsum</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
        </span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">lorem</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">lorem</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
        </span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">lorem</span>
      </li>
      <li class="m-step-indicator__step">
        <div class="m-step-indicator__node"></div>
        <span class="m-step-indicator__label">lorem ipsum</span>
      </li>
    </ul>
  </div>
  <div
    class="step-indicator__controls"
    style="display:flex;justify-content:space-between;margin-top:1rem"
  >
    <button
      type="button"
      class="a-button a-button--secondary -without-icon step-indicator__prev"
    >
      <span class="a-button__label">Previous step</span>
    </button>
    <button
      type="button"
      class="a-button a-button--primary -without-icon step-indicator__next"
    >
      <span class="a-button__label">Next step</span>
    </button>
  </div>
</div>

additional content

demo

import WindowWithFrontendKit from '../../WindowWithFrontendKit';

export default (): void => {
  const ACTIVE_CLASS = '-active';
  const dialogExamples = document.getElementsByClassName(
    'frontend-kit-example__step-indicator-example',
  );

  const setActiveState = (elements, counter) => {
    elements.forEach((element, index) => {
      element.classList.remove(ACTIVE_CLASS);

      if (index + 1 <= counter) element.classList.add(ACTIVE_CLASS);
    });
  };

  [...dialogExamples].forEach((container) => {
    // internal counter which step is active
    let activeStep = 1;

    // get trigger
    const prevTrigger = container.querySelector('.step-indicator__prev');
    const nextTrigger = container.querySelector('.step-indicator__next');

    // get steps
    const steps = [...container.querySelectorAll('.m-step-indicator__step')];
    const maxSteps = steps.length;

    // activate prev step
    prevTrigger.addEventListener('click', (e) => {
      if (activeStep > 0) {
        activeStep = activeStep - 1 <= 0 ? 0 : activeStep - 1;
        setActiveState(steps, activeStep);
      }
    });

    // activate next step
    nextTrigger.addEventListener('click', (e) => {
      if (activeStep < maxSteps) {
        activeStep = activeStep + 1 <= maxSteps ? activeStep + 1 : maxSteps;
        setActiveState(steps, activeStep);
      }
    });
  });
};

styles SCSS

.m-step-indicator {
  &__steps {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
  }

  &__step {
    display: grid;
    grid-template-rows: max-content auto;
    row-gap: 0.25rem;
    flex-grow: 1;
    flex-basis: 0;
    list-style: none;
    margin: 0;
    padding: 0;

    // reset sane default of li-tags
    &::before {
      content: unset;
    }

    // line to node before
    &:not(:first-child)::before {
      content: "";
      height: 1px;
      background-color: var(--small__enabled__fill__default);
      width: calc(100% + 1rem);
      top: 1rem;
      left: calc(-50% - 1rem);
    }

    .m-step-indicator.-small &::before {
      top: 0.5rem;
    }

    // line to node before - active state
    &.-active::before {
      background-color: var(--major-accent__enabled__fill__default);
    }
  }

  &__node {
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: start;
    justify-self: center;
    height: 2rem;
    width: 2rem;
    background-color: var(--neutral__disabled__fill__default);
    color: var(--neutral__disabled__front__default);
    border-radius: 50%;

    .m-step-indicator.-small & {
      height: 1rem;
      width: 1rem;
    }

    .m-step-indicator__step.-active & {
      background-color: var(--major-accent__enabled__fill__default);
      color: var(--major-accent__enabled__front__default);
    }

    .a-icon {
      color: currentColor;
    }
  }

  &__label {
    align-self: start;
    justify-self: center;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    color: var(--plain__disabled__front__default);

    .m-step-indicator__step.-active & {
      color: var(--plain__enabled__front__default);
    }
  }
}