Skip Navigation

Step Indicator

The Step Indicator guides users through a number of steps across multiple screens in order to complete the task.

View v2 to v3 Migration Information

Standard Step Indicator

The standard Indicator displays a label for each step on larger screen sizes and scales to a more condensed version on XS/Small screen sizes.


When to Use

  • This is the most common Step Indicator and should be used in most instances.

When Not to Use

Variations

Usage

Number of Steps

Keep the number of steps at a minimum (target 3 to 6 steps). For larger processes, consider breaking up into separate process flows. If a small number of steps is not possible, consider using the Standard Indicator with Dropdown or the Dropdown Indicator (as these allow for a large number of steps to be indicated within smaller screen sizes).

Visual Display

  • The Step Indicator should appear at the top of the screen, below the main navigation.
  • The step width flexes with the size of the container. There is a minimum width of 100px, and a maximum width of 160px. No step in this format should exceed this 160px even when a container far exceeds the total width of the Step Indicator.
  • Replace the “Step X” label with the corresponding name of the step and keep labels extremely succinct.

Variations

Standard Indicator with Dropdown


This version displays the Standard Step Indicator on wider screen resolutions, transitions to a Condensed variation on medium screen sizes and transitions to a Dropdown variation on the smallest screen sizes.

When to Use

  • Use when there are a large number of steps and it is important to see the name of the steps on smaller screen sizes.

When Not to Use

Condensed Indicator

The Condensed Step Indicator is similar to the Standard Step Indicator with the exception of not including the label beneath each individual step. The label may appear above the Step Indicator, as an optional element

  • Smaller scale
  • Does not display a label below; instead the label displays on tap/hover
  • Can wrap to more than one line, based on available space
  • May display a label name (current step only) above the indicator (optional)


When to Use

  • Use when there is limited horizontal space or when a smaller scale is preferred (on mobile applications, for example).
  • When communicating the number of steps is important AND when it is not critical to communicate the name of each step.

When Not to Use

  • When it is important for the user to know the name of each subsequent step.

Additional Guidelines

  • On desktop, A tooltip should display on hover or tap to label each step.
  • Try to limit the number of steps to six or fewer.


When to Use

  • Use on smaller screen sizes when communicating the name of each step and/or the ability to navigate between steps is important to users.

When Not to Use

  • Not recommended for larger screen resolutions.
  • Not recommended for short process flows.

Additional Guidelines

  • Use a disabled state for steps that the user is not able to access.
  • When the user selects a step in the dropdown, the specified step should load and the indicator should display the new step.

Developer Notes

The following options may be passed when using new Spark.StepIndicator(el, {}):

Name Type Default Description
type string 'standard' The type of Step Indicator to render. Can be standard-dropdown, large, condensed or dropdown. If not passed, it will be parsed from the data-type attribute on the element if it's present.
dropdownLabel string 'Select a Step' The label to be used in the Dropdown variation when expanded. If not passed, it will be parsed from the data-dropdownlabel attribute on the element if it's present.
currentLabel string 'Current' The accessibility label to be used on the current step. If not passed, it will be parsed from the data-currentlabel attribute on the element if it's present.
completedLabel string 'Completed' The accessibility label to be used on the completed step. If not passed, it will be parsed from the data-completedlabel attribute on the element if it's present.
stepProgressionLabel string '{current} of {total}' The label to be used in the Dropdown variation when displaying the current step; for example in 1 of 6. {current} will be replaced with the current step number. {total} will be replaced with the total number of steps. If not passed, it will be parsed from the data-stepprogressionlabel attribute on the element if it's present.

For all available methods and full API, refer to the component code on Bitbucket.

Standard Indicator

<div class="spark-step-indicator">
  <div class="spark-step-indicator__body">
        
    <div class="spark-step-indicator__list">
    
      <a aria-labelledby="step-1" href="#" class="spark-step-indicator__item spark-step-indicator__item--completed">
        <span aria-label="Completed" class="spark-step-indicator__icon">1</span>
        <span id="step-1" class="spark-step-indicator__text">
          Step 1
        </span>
      </a>
      <a aria-labelledby="step-2" href="#" class="spark-step-indicator__item spark-step-indicator__item--current">
        <span aria-label="Current" class="spark-step-indicator__icon">2</span>
        <span id="step-2" class="spark-step-indicator__text">
          Step 2
        </span>
      </a>
      <a aria-labelledby="step-3" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">3</span>
        <span id="step-3" class="spark-step-indicator__text">
          Step 3
          <small class="spark-step-indicator__subtext">(Sublabel)</small>
        </span>
      </a>
      <a aria-labelledby="step-4" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">4</span>
        <span id="step-4" class="spark-step-indicator__text">
          Step 4
        </span>
      </a>
      <a aria-labelledby="step-5" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">5</span>
        <span id="step-5" class="spark-step-indicator__text">
          Step 5
        </span>
      </a>
      <a aria-labelledby="step-6" href="#" class="spark-step-indicator__item spark-step-indicator__item--disabled" tabindex="-1">
        <span class="spark-step-indicator__icon" aria-hidden="true">6</span>
        <span id="step-6" class="spark-step-indicator__text">
          Step 6
        </span>
      </a>

    </div>

  </div>
</div>

<style type="text/css">
  
</style>
var el = document.querySelector('.spark-step-indicator');
var exampleClickMethod = function(step, instance, event){
  event.preventDefault();

  if(this.classList.contains('spark-step-indicator__item--disabled')){
    return;
  } else {
    instance.setStepState(step,'current');
  }
}

var stepInstance = new Spark.StepIndicator(el, {onStepClick : exampleClickMethod});

This is default type of Step Indicator. You don’t need to set any parameters.

Standard Indicator with Dropdown

<div class="spark-step-indicator" data-type="standard-dropdown">
  <div class="spark-step-indicator__body">
          
    <div id="step-indicator-list-id-2" class="spark-step-indicator__list">
    
      <a aria-labelledby="step-1" href="#" class="spark-step-indicator__item spark-step-indicator__item--completed">
        <span aria-label="Completed" class="spark-step-indicator__icon">1</span>
        <span id="step-1" class="spark-step-indicator__text">
          Step 1
        </span>
      </a>
      <a aria-labelledby="step-2" href="#" class="spark-step-indicator__item spark-step-indicator__item--current">
        <span aria-label="Current" class="spark-step-indicator__icon">2</span>
        <span id="step-2" class="spark-step-indicator__text">
          Step 2
        </span>
      </a>
      <a aria-labelledby="step-3" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">3</span>
        <span id="step-3" class="spark-step-indicator__text">
          Step 3
          <small class="spark-step-indicator__subtext">(Sublabel)</small>
        </span>
      </a>
      <a aria-labelledby="step-4" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">4</span>
        <span id="step-4" class="spark-step-indicator__text">
          Step 4
        </span>
      </a>
      <a aria-labelledby="step-5" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">5</span>
        <span id="step-5" class="spark-step-indicator__text">
          Step 5
        </span>
      </a>
      <a aria-labelledby="step-6" href="#" class="spark-step-indicator__item spark-step-indicator__item--disabled" tabindex="-1">
        <span class="spark-step-indicator__icon" aria-hidden="true">6</span>
        <span id="step-6" class="spark-step-indicator__text">
          Step 6
        </span>
      </a>

    </div>

  </div>
</div>

<style type="text/css">
  
</style>
var el = document.querySelector('.spark-step-indicator');
var exampleClickMethod = function(step, instance, event){
  event.preventDefault();

  if(this.classList.contains('spark-step-indicator__item--disabled')){
    return;
  } else {
    instance.setStepState(step,'current');
  }
}

var stepInstance = new Spark.StepIndicator(el, {onStepClick : exampleClickMethod, type:'standard-dropdown'});

You can set data-type='standard-dropdown', or directly set parameter type='standard-dropdown' to set this variation.

Large Indicator

<div class="spark-step-indicator" data-type="large">
  <div class="spark-step-indicator__body">
        
    <div class="spark-step-indicator__list">
    
      <a aria-labelledby="step-1" href="#" class="spark-step-indicator__item spark-step-indicator__item--completed">
        <span aria-label="Completed" class="spark-step-indicator__icon">1</span>
        <span id="step-1" class="spark-step-indicator__text">
          Step 1
        </span>
      </a>
      <a aria-labelledby="step-2" href="#" class="spark-step-indicator__item spark-step-indicator__item--current">
        <span aria-label="Current" class="spark-step-indicator__icon">2</span>
        <span id="step-2" class="spark-step-indicator__text">
          Step 2
        </span>
      </a>
      <a aria-labelledby="step-3" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">3</span>
        <span id="step-3" class="spark-step-indicator__text">
          Step 3
          <small class="spark-step-indicator__subtext">(Sublabel)</small>
        </span>
      </a>
      <a aria-labelledby="step-4" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">4</span>
        <span id="step-4" class="spark-step-indicator__text">
          Step 4
        </span>
      </a>
      <a aria-labelledby="step-5" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">5</span>
        <span id="step-5" class="spark-step-indicator__text">
          Step 5
        </span>
      </a>
      <a aria-labelledby="step-6" href="#" class="spark-step-indicator__item spark-step-indicator__item--disabled" tabindex="-1">
        <span class="spark-step-indicator__icon" aria-hidden="true">6</span>
        <span id="step-6" class="spark-step-indicator__text">
          Step 6
        </span>
      </a>

    </div>

  </div>
</div>

<style type="text/css">
  
</style>
var el = document.querySelector('.spark-step-indicator');
var exampleClickMethod = function(step, instance, event){
  event.preventDefault();

  if(this.classList.contains('spark-step-indicator__item--disabled')){
    return;
  } else {
    instance.setStepState(step,'current');
  }
}

var stepInstance = new Spark.StepIndicator(el, {onStepClick : exampleClickMethod,{type:'large'});

You can set data-type='large', or directly set parameter type='large' to set this variation.

This variation is not recommended for most products. It will remain “large” at all breakpoints and will wrap if there is not enough space. It is best used by setting at custom breakpoints and configuring the type before calling update().

Condensed Indicator

<div class="spark-step-indicator" data-type="condensed">
  <div class="spark-step-indicator__body">
        
    <div class="spark-step-indicator__list spark-step-indicator__list--condensed">
    
      <a aria-labelledby="step-1" href="#" class="spark-step-indicator__item spark-step-indicator__item--completed">
        <span aria-label="Completed" class="spark-step-indicator__icon">1</span>
        <span id="step-1" class="spark-step-indicator__text">
          Step 1
        </span>
      </a>
      <a aria-labelledby="step-2" href="#" class="spark-step-indicator__item spark-step-indicator__item--current">
        <span aria-label="Current" class="spark-step-indicator__icon">2</span>
        <span id="step-2" class="spark-step-indicator__text">
          Step 2
        </span>
      </a>
      <a aria-labelledby="step-3" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">3</span>
        <span id="step-3" class="spark-step-indicator__text">
          Step 3
          <small class="spark-step-indicator__subtext">(Sublabel)</small>
        </span>
      </a>
      <a aria-labelledby="step-4" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">4</span>
        <span id="step-4" class="spark-step-indicator__text">
          Step 4
        </span>
      </a>
      <a aria-labelledby="step-5" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">5</span>
        <span id="step-5" class="spark-step-indicator__text">
          Step 5
        </span>
      </a>
      <a aria-labelledby="step-6" href="#" class="spark-step-indicator__item spark-step-indicator__item--disabled" tabindex="-1">
        <span class="spark-step-indicator__icon" aria-hidden="true">6</span>
        <span id="step-6" class="spark-step-indicator__text">
          Step 6
        </span>
      </a>

    </div>

  </div>
</div>

<style type="text/css">
  
</style>
var el = document.querySelector('.spark-step-indicator');
var exampleClickMethod = function(step, instance, event){
  event.preventDefault();

  if(this.classList.contains('spark-step-indicator__item--disabled')){
    return;
  } else {
    instance.setStepState(step,'current');
  }
}

var stepInstance = new Spark.StepIndicator(el, {onStepClick : exampleClickMethod, type:'condensed'});

You can set data-type='condensed', or directly set parameter type='condensed' to set this variation.

<div class="spark-step-indicator" data-type="dropdown" style="max-width:500px;margin:auto" data-stepprogressionlabel="{current} of {total}">
  <div class="spark-step-indicator__body spark-step-indicator__body--dropdown">
        
    <div id="step-indicator-list-id-1" class="spark-step-indicator__list  spark-step-indicator__list collapse">
    
      <a aria-labelledby="step-1" href="#" class="spark-step-indicator__item spark-step-indicator__item--completed">
        <span aria-label="Completed" class="spark-step-indicator__icon">1</span>
        <span id="step-1" class="spark-step-indicator__text">
          Step 1
        </span>
      </a>
      <a aria-labelledby="step-2" href="#" class="spark-step-indicator__item spark-step-indicator__item--current">
        <span aria-label="Current" class="spark-step-indicator__icon">2</span>
        <span id="step-2" class="spark-step-indicator__text">
          Step 2
        </span>
      </a>
      <a aria-labelledby="step-3" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">3</span>
        <span id="step-3" class="spark-step-indicator__text">
          Step 3
          <small class="spark-step-indicator__subtext">(Sublabel)</small>
        </span>
      </a>
      <a aria-labelledby="step-4" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">4</span>
        <span id="step-4" class="spark-step-indicator__text">
          Step 4
        </span>
      </a>
      <a aria-labelledby="step-5" href="#" class="spark-step-indicator__item">
        <span class="spark-step-indicator__icon" aria-hidden="true">5</span>
        <span id="step-5" class="spark-step-indicator__text">
          Step 5
        </span>
      </a>
      <a aria-labelledby="step-6" href="#" class="spark-step-indicator__item spark-step-indicator__item--disabled" tabindex="-1">
        <span class="spark-step-indicator__icon" aria-hidden="true">6</span>
        <span id="step-6" class="spark-step-indicator__text">
          Step 6
        </span>
      </a>

    </div>

  </div>
</div>

<style type="text/css">
  
</style>
var el = document.querySelector('.spark-step-indicator');
var exampleClickMethod = function(step, instance, event){
  event.preventDefault();

  if(this.classList.contains('spark-step-indicator__item--disabled')){
    return;
  } else {
    instance.setStepState(step,'current');
  }
}

var stepInstance = new Spark.StepIndicator(el, {onStepClick : exampleClickMethod, type:'dropdown'});

You can set data-type='dropdown', or directly set parameter type='dropdown' to set this variation.

Accessibility Notes

Providing Labels for Assistive Devices

Depending on the size or variation of the Step Indicator being displayed, certain values are displayed or hidden to account for the available screen size or the configurations selected. To ensure that the correct text labels are made available to screen-readers and other assistive devices regardless of viewport size, it is important to set aria attributes to certain elements within the Step Indicator component.

Each step within the Step Indicator contains a spark-step-indicator__text element. This should be considered the primary text made available to assistive devices as its label is typically more descriptive. As such, an id attribute should be set for this label. Keep in mind that this attribute needs to be unique on each page, so each step should have its own unique id e.g id="step-1", id="step-2" and so on.

Since the primary text comes from the element discussed above, the text in the spark-step-indicator__icon element needs to be hidden to assistive devices. To accomplish this, add an aria-hidden attribute to this element with the value set to true unless it is either a completed or current step. Current or completed icons should have an aria-label attribute attached to them to notify assistive devices of the current state of the Step Indicator.

Once the id above is set, we need to indicate to assistive devices that the text label contained within that element is what should be read out. This is done by setting an aria-labelledby attribute to the parent spark-step-indicator__item element, with the value of the attribute being the id set on the child element.

The example below illustrates the process above.

<a aria-labelledby="step-1" href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
  <span class="spark-step-indicator__icon" aria-hidden="true">1</span>
  <span id="step-1" class="spark-step-indicator__text">
    Step 1
  </span>
</a>

Identifying Completed and Other Steps

The current step and completed step should have an aria-label attribute that is appropriate for the current state of the step. The aria-hidden attribute should be removed from the current and completed steps. You can update these by calling the setStepState.

<a aria-labelledby="step-1" href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--completed">
  <span aria-label="Completed" class="spark-step-indicator__icon">1</span>
  <span id="step-1" class="spark-step-indicator__text">
    Step 1
  </span>
</a>

<a aria-labelledby="step-2" href="javascript:void(0)" class="spark-step-indicator__item spark-step-indicator__item--current">
  <span aria-label="Current" class="spark-step-indicator__icon">2</span>
  <span id="step-2" class="spark-step-indicator__text">
    Step 2
  </span>
</a>

<a aria-labelledby="step-3" href="javascript:void(0)" class="spark-step-indicator__item">
  <span class="spark-step-indicator__icon" aria-hidden="true">3</span>
  <span id="step-3" class="spark-step-indicator__text">
    Step 3
    <small class="spark-step-indicator__subtext">(Sublabel)</small>
  </span>
</a>

Managing Disabled Steps

To prevent navigation to a disabled step via keyboard, a tabindex attribute should be set on the spark-step-indicator__item--disabled element. The value of this attribute should be -1. If changing the status of a step programmatically via the setStepState function (e.g. completed, disabled) then Javascript will set the attribute above for disabled items, or it will be removed if the status changes to something other than disabled. For more information, read the full API documentation.

The Standard Indicator with Dropdown and Dropdown Indicator variations require an id attribute set on the .spark-step-indicator__list element. This attribute is used by an aria-controls attribute set on the dropdown button to indicate which element it controls. If the attribute is not set, the value of the aria-controls will be empty, in which case it might not be clear to assistive devices as to which element is being controlled. Other aria attributes used in conjunction with the above, e.g. aria-expanded, are set automatically using Javascript.