Progress trackers

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
Web resource key: com.atlassian.auiplugin:aui-progress-tracker
AMD Module key: N/A
Experimental API: 5
General API: 5.8

Examples

Default

Demo code
Result
  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm
AخA
 
<ol class="aui-progress-tracker">
    <li class="aui-progress-tracker-step" style="width:25%"><span>Configure instance</span></li>
    <li class="aui-progress-tracker-step  aui-progress-tracker-step-current" style="width:25%"><span>Select plugins</span>
    </li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Invite users</span></li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Confirm</span></li>
</ol>

Link

Demo code
Result
  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm
 
<ol class="aui-progress-tracker">
    <li class="aui-progress-tracker-step" style="width:25%"><a href="#">Configure instance</a></li>
    <li class="aui-progress-tracker-step  aui-progress-tracker-step-current" style="width:25%"><a href="#">Select plugins</a>
    </li>
    <li class="aui-progress-tracker-step" style="width:25%"><a href="#">Invite users</a></li>
    <li class="aui-progress-tracker-step" style="width:25%"><a href="#">Confirm</a></li>
</ol>

Inverted

Demo code
Result
  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm
 
.inverted-progress-tracker-example {
    background: #f5f5f5;
    padding: 10px 0;
}
 
<div class="inverted-progress-tracker-example">
    <ol class="aui-progress-tracker aui-progress-tracker-inverted">
        <li class="aui-progress-tracker-step" style="width:25%"><span>Configure instance</span></li>
        <li class="aui-progress-tracker-step" style="width:25%"><span>Select plugins</span></li>
        <li class="aui-progress-tracker-step aui-progress-tracker-step-current" style="width:25%"><span>Invite users</span></li>
        <li class="aui-progress-tracker-step" style="width:25%"><span>Confirm</span></li>
    </ol>
</div>

First step marked as current

You should not create a Progress Tracker without a step marked as current.

Demo code
Result
  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm
 
<ol class="aui-progress-tracker">
    <li class="aui-progress-tracker-step aui-progress-tracker-step-current" style="width:25%"><span>Configure instance</span></li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Select plugins</span></li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Invite users</span></li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Confirm</span></li>
</ol>

Last step marked as current

Demo code
Result
  1. Configure instance
  2. Select plugins
  3. Invite users
  4. Confirm
 
<ol class="aui-progress-tracker">
    <li class="aui-progress-tracker-step" style="width:25%"><span>Configure instance</span></li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Select plugins</span></li>
    <li class="aui-progress-tracker-step" style="width:25%"><span>Invite users</span></li>
    <li class="aui-progress-tracker-step aui-progress-tracker-step-current" style="width:25%"><span>Confirm</span></li>
</ol>

Code

Soy

 
{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
**/