Navigation étape par étape

Statut

Stable

Type

Conception de Canada.ca

Dernière revue

2023-09-05

Orientation

Navigation étape par étape (pages de lancement d'un service) - Configuration de conception de Canada.ca

Nom technique

• gc-stp-stp

But

Affiche les liens pour chacune des étapes de lancement d'un service et met en surbrillance l'étape sélectionnée.

Comment mettre en œuvre

1. Créez un <div> avec la classe CSS gc-stp-stp.
2. Dans ce <div>, créez soit un <ul> soit un <ol> (la bonne balise dépendra de si vos pages ont un ordre logique ou non. À ce <ul> ou <ol> ajoutez les classes CSS row et toc.
3. Dans ce <ul> ou <ol>, ajoutez vos <li> et ajoutez à chacun d'eux les classes CSS suivantes : col-md-4 et col-sm-6.
4. Dans ces <li>, créez un <a> avec la classe CSS list-group-item.
5. Au <a> de la page courante, ajoutez la classe CSS active.

Remarque : ce composant doit être inséré directement après la signature.

Exemples pratiques

• Exemple : Navigation étape par étape

Évaluation et rapport

Il n'y a pas d'évaluation et de rapport disponible pour ce composant.

API (Version 1.0)

Classe CSS (v1.0)

gc-stp-stp

Composant : Navigation étape par étape

Gabarit (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-fr.html">1. [Nom de la page de la section ou de l’étape]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page2-fr.html">2. [Nom de la page de la section ou de l’étape]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page3-fr.html">3. [Nom de la page de la section ou de l’étape]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page4-fr.html">4. [Nom de la page de la section ou de l’étape]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item" href="page5-fr.html">5. [Nom de la page de la section ou de l’étape]</a></li>
		<li class="col-md-4 col-sm-6"><a class="list-group-item active" href="#">6. [Nom de la page de la section ou de l’étape]</a></li>
	</ol>
</div>

Rendu visuel (v1.0)