Progress tracker

Ask a question Design guidelines

Summary

A progress tracker guides users through a number of steps across multiple screens in order to complete a task flow. It shows users where they are in the process, and also offers navigation within the process.

Status

API status: general
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-progress-tracker
AMD Module key: N/A
Experimental since: 5.0
General API status: 5.8

Examples

Default:

  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm

Inverted:

  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm

Code

Soy

AخA
 
{call aui.progressTracker.progressTracker}
{param steps: [
    [
        'text': 'Step 1',
        'href': '#step1'
    ],
    [
        'text': 'Step 2',
        'href': '#step2',
        'isCurrent': true
    ],
    [
        'text': 'Step 3',
        'href': '#step3'
    ],
    [
        'text': 'Step 4',
        'href': '#step4'
    ],
    [
        'text': 'Step 5',
        'href': '#step5'
    ]
    ] /}
{/call}

Options

Soy is available

​x
 
/**
* Progress Tracker
* @param steps list of the steps to display
* @param? isInverted boolean - set to true if using on a grey background
* @param? id
* @param? extraClasses
* @param? extraAttributes
*/
​
/**
* Step in the Progress Tracker
* @param? isCurrent boolean - set to true if step is the current step
* @param width number - should be the exact same width as all the other steps to maintain correct visual formatting (can't do this in CSS due to CSS not knowing the number of steps)
* @param text
* @param? href
* @param? id
* @param? extraClasses
* @param? extraAttributes
**/