Progress tracker

Other names: process indicator, step list

A progress tracker displays the steps and progress through a journey.

Use the progress tracker to show:

  • Milestones
  • Timelines
  • Chronological steps

Horizontal tracker

Default

Step 1

Briefly discuss the step or identify the milestone.

Step 2

Keep the message clear and concise.

Step 3

Do not link to more information from the tracker.

Step 4

Instead, link to additional information in your body content or tracker caption

Bold

Step 1

Briefly discuss the step or identify the milestone.

Step 2

Keep the message clear and concise.

Step 3

Do not link to more information from the tracker.

Step 4

Instead, link to additional information in your body content or tracker caption.

Default




  

    

    

      
    

    

      
Step 1

      
Briefly discuss the step or identify the milestone.

    

    
  


  

    
    

      
    

    

      
Step 2

      
Keep the message clear and concise.

    

    
  


  

    
    

      
    

    

      
Step 3

      
Do not link to more information from the tracker.

    

    
  


  

    
    

      
    

    

      
Step 4

      

        Instead, link to additional information in your body content or tracker
        caption

Bold




  

    
    

      
    

    

      
Step 1

      
Briefly discuss the step or identify the milestone.

    

    
  


  

    
    

      
    

    

      
Step 2

      
Keep the message clear and concise.

    

    
  


  

    
    

      
    

    

      
Step 3

      
Do not link to more information from the tracker.

    

    
  


  

    
    

      
    

    

      
Step 4

      

        Instead, link to additional information in your body content or tracker
        caption.

Vertical tracker

  • Step 1 Contributor
    YY - YY

    Briefly discuss the step or identify the milestone.

  • Step 2 Contributor
    YY - YY

    Keep the message clear and concise.

  • Step 3 Contributor
    YY - YY

    Do not link to more information from the tracker.

  • Step 4 Contributor
    YY - YY

    Instead, link to additional information in your body content or tracker caption. 




  
  

    
    
      
  • 
        
    
          
          
    
            
    Step 1 Contributor
    
            
    YY - YY
    
          
    
          
          
          
    
            
            
    
              
            
    
            
            
    
              Briefly discuss the step or identify the milestone.
            
    
          
    
          
        
    
      
    • 
      
  • 
        
    
          
          
    
            
    Step 2 Contributor
    
            
    YY - YY
    
          
    
          
          
          
    
            
            
    
              
            
    
            

            
    
              Keep the message clear and concise.
            
    
          
    
          
        
    
      
    • 
      
  • 
        
    
          
          
    
            
    Step 3 Contributor
    
            
    YY - YY
    
          
    
          
          
          
    
            
            
    
              
            
    
            
            
    
              Do not link to more information from the tracker.
            
    
          
    
          
        
    
      
    • 
      
  • 
        
    
          
          
    
            
    Step 4 Contributor
    
            
    YY - YY
    
          
    
          
          
          
    
            
            
    
              
            
    
            
            
    
              Instead, link to additional information in your body content or
              tracker caption.
            
    
          
    
          
        
    
      
    •

Step list

  1. Step one of your list
    Riveting text to explain the step.
  2. Step two of your list
    Everyone is going to love the simple, visual way you laid out these steps.
  3. Step three of your list
    This process has never seemed easier. 
    
  
  1. 
    Step one of your list
    
    
    
      Riveting text to explain the step.
    
  
    2. 
  
  2. 
    Step two of your list
    
    
    
      Everyone is going to love the simple, visual way you laid out these steps.
    
  
    3. 
  
  3. 
    Step three of your list
    
    
    
      This process has never seemed easier.
    
  
    4.

Usage

When and how to use it

The progress tracker shows visitors where they are in a process. It can be used to help visitors navigate through processes by selecting steps.

Progress trackers should display three or more steps or events in a sequence.

How not to use it

Do not use the progress tracker to display items that are out of order or unrelated. Use bullet points instead.

Do not use the progress tracker component if there is not a fleshed out process to track.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes