Skip to main contentSkip to site searchSkip to component search
Honeycomb

Progress Tracker

Visualize steps and also to estimate how long a certain task may take.

The progress tracker can be used to visualize steps and also to estimate how long a certain task may take.

The order of the items is relevant so you must use the ol (ordered list element) for the markup. The step numbers are automatically generated by using the ol > li items.

Each progress item must have a flix-progress-tracker__link element (use span if you do not wish them to be linked, but the element ) to have a text element .flix-progress-tracker__text which is hidden on smaller screens for space saving, leaving only the numbers visible.

Initial state

The initial state means that the first item is the current step and there are still no completed steps.

You must always have a current step, otherwise all items will be highlighted.

  1. Get Honeycomb
  2. Use it
  3. Enjoy
  4. Spread the word 
<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item" aria-current="step">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Get Honeycomb</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Use it</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Enjoy</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Spread the word</span>
    </span>
  </li>
</ol>

Completed steps

To show the "completed" checkmark on completed items, add the --completed modifier to the item.

You must also add a screen reader only text (flix-sr-only) to announce that to visually impaired users as well.

Update the value of aria-current on the items to reflect the current step, this will trigger the visual active state and show the correct highlight color for previous and next items.

The --completed modifier can be added to any item, even items tha are after the current step. This means you can allow users to go back on previous items after completing the current step. For example: if they want to change the selected seat after completing the passenger details form.

  1. Get Honeycomb Completed
  2. Use it Completed
  3. Enjoy Completed
  4. Spread the word 
<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item flix-progress-tracker__item--completed">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Get Honeycomb</span>
      <span class="flix-sr-only">Completed</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item flix-progress-tracker__item--completed" aria-current="step">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Use it</span>
      <span class="flix-sr-only">Completed</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item flix-progress-tracker__item--completed">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Enjoy</span>
      <span class="flix-sr-only">Completed</span>
    </span>
  </li>
  <li class="flix-progress-tracker__item">
    <span class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Spread the word</span>
    </span>
  </li>
</ol>

Clickable steps

Each step can be made a link or a button. Simply change the flix-progress-tracker__link element to the one you need, e.g.:

  1. Get Honeycomb Completed
  2. Use it Completed
  3. Enjoy Completed 
<ol class="flix-progress-tracker">
  <li class="flix-progress-tracker__item flix-progress-tracker__item--completed">
    <a class="flix-progress-tracker__link" href="#">
      <span class="flix-progress-tracker__text">Get Honeycomb</span>
      <span class="flix-sr-only">Completed</span>
    </a>
  </li>
  <li class="flix-progress-tracker__item flix-progress-tracker__item--completed">
    <a class="flix-progress-tracker__link" href="#">
      <span class="flix-progress-tracker__text">Use it</span>
      <span class="flix-sr-only">Completed</span>
    </a>
  </li>
  <li class="flix-progress-tracker__item flix-progress-tracker__item--completed">
    <a class="flix-progress-tracker__link" href="#">
      <span class="flix-progress-tracker__text">Enjoy</span>
      <span class="flix-sr-only">Completed</span>
    </a>
  </li>
  <li class="flix-progress-tracker__item" aria-current="step">
    <button type="button" class="flix-progress-tracker__link">
      <span class="flix-progress-tracker__text">Spread the word</span>
    </button>
  </li>
</ol>