Step by Step navigation

Status

Stable

Type

Canada.ca design pattern

Last review

2023-09-05

Guidance

Step by step navigation (service initiation pages): Canada.ca design system

Technical name

• gc-stp-stp

Purpose

Shows links to each step in initiating the service and highlights the currently selected step.

Working example

• Example: Step by step navigation

How to implement

1. Create a <div> with the CSS class gc-stp-stp.
2. Within this <div>, create either a <ul> or <ol> (the correct tag will depend on whether or not your pages have a logical order. To this <ul> or <ol> add the CSS classes row and toc.
3. Within this <ul> or <ol>, add your <li> and add the following CSS classes: col-md-4 and col-sm-6 to every <li>.
4. Within those <li>, create a <a> with the CSS class list-group-item.
5. To the current page's <a> add the CSS class active.

Note: this component should be inserted directly after the byline.

Evaluation and report

There is no evaluation and report available for this component.

API (Version 1.0)

CSS Class (v1.0)

gc-stp-stp

Component: Step by Step navigation

Template (v2.0)

<div class="gc-stp-stp">
	<ol class="row toc">
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="index-en.html">1. [Step / section page name]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page2-en.html">2. [Step / section page name]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page3-en.html">3. [Step / section page name]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page4-en.html">4. [Step / section page name]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page5-en.html">5. [Step / section page name]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item active" href="#">6. [Step / section page name]</a></li>
	</ol>
</div>

Visual rendering (v1.0)