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.

To mark the current step, add the aria-current="step" attribute to the link element of the current step. 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">
    <span class="flix-progress-tracker__link" aria-current="step">
      <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 the complete step 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">
    <span class="flix-progress-tracker__link" aria-current="step">
      <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.:

<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">
    <button type="button" class="flix-progress-tracker__link" aria-current="step">
      <span class="flix-progress-tracker__text">Spread the word</span>
    </button>
  </li>
</ol>

Tabbed content

The Tabs plugin also supports progress tracker components to be used to toggle tab panels.

Besides using the plugin, to create tabbed content with the progress-tracker will require you to make some changes to the component markup:

  • The container:
    • Wrap the progress tracker list and the panels with a section element, which you can use to set up the tabs component and give it a label.
    • You may want to use the --stretch modifier to make the component fill the available space.
    • Add the data-flixtabs attribute to the section container, so the plugin can find it.
  • The panels:
    • Add the content of the tab panels inside of flix-progress-tracker__panel element and give them an id.
    • Tab panels require an accessible label, the plugin will associate their tabs (buttons) as their labels via aria-labelledby, you can add your own aria-label to the panels if necessary.
  • Use buttons:
    • Use buttons instead of links as the __link element and then connect them with their respective panels with aria-controls="{PANEL_ID}".
    • Add aria-selected="true" to the tab that should be selected by default, this is usually the first one.
    • Add an id to the buttons so the plugin can automatically associate them as labels for their respective panels.

The plugin will automatically handle the remaining roles and aria attributes, manage toggling the panels on and off and adding mouse and keyboard controls.

1. Get Honeycomb
2. Use it
3. Enjoy
4. Spread the word 
<section aria-label="Tabs" data-flixtabs="">
  <ol class="flix-progress-tracker flix-progress-tracker--stretch">
    <li class="flix-progress-tracker__item">
      <button class="flix-progress-tracker__link" id="tab-1" aria-controls="panel-1" aria-selected="true">
        <span class="flix-progress-tracker__text">Get Honeycomb</span>
      </button>
    </li>
    <li class="flix-progress-tracker__item">
      <button class="flix-progress-tracker__link" id="tab-2" aria-controls="panel-2">
        <span class="flix-progress-tracker__text">Use it</span>
      </button>
    </li>
    <li class="flix-progress-tracker__item">
      <button class="flix-progress-tracker__link" id="tab-3" aria-controls="panel-3">
        <span class="flix-progress-tracker__text">Enjoy</span>
      </button>
    </li>
    <li class="flix-progress-tracker__item">
      <button type="button" class="flix-progress-tracker__link" id="tab-4" aria-controls="panel-4">
        <span class="flix-progress-tracker__text">Spread the word</span>
      </button>
    </li>
  </ol>
  <div class="flix-progress-tracker__panel flix-space-2-top" id="panel-1">
    <div class="flix-box flix-has-text-centered">
      1. Get Honeycomb
    </div>
  </div>
  <div class="flix-progress-tracker__panel flix-space-2-top" id="panel-2">
    <div class="flix-box flix-has-text-centered">
      2. Use it
    </div>
  </div>
  <div class="flix-progress-tracker__panel flix-space-2-top" id="panel-3">
    <div class="flix-box flix-has-text-centered">
      3. Enjoy
    </div>
  </div>
  <div class="flix-progress-tracker__panel flix-space-2-top" id="panel-4">
    <div class="flix-box flix-has-text-centered">
      4. Spread the word
    </div>
  </div>
</section>