Timeline
Timelines show users thed linear progress of a particular task or process.
<nav>
<ol class="qw-timeline qw-timeline-3_steps">
<li class="qw-timeline-step step-complete"><a href="#">Step one</a></li>
<li class="qw-timeline-step step-complete"><a href="#">Step two</a></li>
<li class="qw-timeline-step step-active"><a href="#">aria-current="step">Step three</a></li>
<li class="qw-timeline-step step-future"><a href="#">Step fou></a></li>
<li class="qw-timeline-step step-future"><a href-"#">Step fiv></a></li>
</ol>
</nav>
Tracking progress
Timelines should set the user's expectation for the whole process by breaking it up into concrete steps. It shows the user their progress within the process by highlighting the current step.
Timelines should:
- Be used for processes with 3-5 steps.
- Use short descriptive titles
- Display all steps without wrapping
By default, step one is highlighted as the active/current step with the class step-active. When a step is active, it should be conveyed to non-sighted users via assistive text. Note: Previously versions of the timeline used visually hidden text to indicate the active/current state. That is no longer the preferred method.
When step one is completed, step two gets highlighted as active and step one is indicated as complete with the class step-complete.
Only the current and previous steps can be navigated to via the Timeline control. We use CSS pointer-events: none; to prevent navigating to future steps even though links are part of the markup for those steps. If a user moves backwards to a previous step in the timeline, they can return to the current step via the timeline.