Fil d'Ariane

Statut

Stable

Version

1.1.0

Type

Fonctionnalité globale de site de Canada.ca

Introduction

Objectif

L’objectif du fil d'Ariane est de renforcer l’emplacement actuel des visiteurs dans le modèle de navigation de l’utilisateur du site Canada.ca. Il indique l’emplacement de la page actuelle par rapport à son parenr dans la structure du site. Il fournit également aux utilisateurs une méthode simple pour accéder à des sections supérieures de la structure du site.

Évaluation et rapport

Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.

Orientation

• Fil d'Ariane

Variantes

Ce composant prend en charge 1 variante:

• Fil d'Ariane (par défaut)

Fil d'Ariane (par défaut)

Itération 2

Voici une liste des changements qui se sont produits depuis l'itération précédente :

Exemple(s) pratique(s)

Veuillez vous référer au fil d'Ariane au haut de cette page.

Comment mettre en œuvre

• Le fil d'Ariane commence toujours par « Canada.ca », qui est toujours un lien vers la page d'accueil de Canada.ca dans la langue actuelle.
• La page en cours n’est jamais affichée à la fin de la piste de navigation.
• Utilisez une icône de chevron à droite () pour séparer les niveaux
• Les longs titres de page doivent être raccourcis dans la mesure du possible, pour permettre de réduire l’espace horizontal nécessaire pour afficher la piste.

Le nom de chaque page ou section dans le site Canada.ca doit être associé à une version raccourcie du nom, aux fins du fil d'Ariane et d’autres systèmes de navigation.

Par exemple, lorsqu'une personne est sur la page « Planification d'entreprise » dans le thème « Entreprises et industrie » le fil d'Ariane sera :

Canada.ca > Entreprises > Lancer une entreprise

Note: GCWeb vX.0 n'est plus compatible avec le modèle de mégamenu antérieur à 2019 (GCWEB v4.x) qui prenait toute la largeur de la page.

Recommendation: Le titre de la page ne dois pas être inclus parmis la liste de fil d'arianne.

Exemple de code (identique à l'itération 1)

Voici la sortie html avec des données structurées au format RDFa pour l'exemple de fil d'Ariane ci-dessus :

<nav id="wb-bc" property="breadcrumb">
		<h2>Vous êtes ici:</h2>
		<div class="container">
			<ol class="breadcrumb" typeof="BreadcrumbList">
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://www.canada.ca/fr.html">
						<span property="name">Canada.ca</span>
					</a>
					<meta property="position" content="1">
				</li>
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://wet-boew.github.io/GCWeb/index-fr.html">
						<span property="name">GCWeb accueil</span>
					</a>
					<meta property="position" content="2">
				</li>
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://wet-boew.github.io/GCWeb/méli-mélo/méli-mélo-fr.html">
						<span property="name">GCWeb accueil</span>
					</a>
					<meta property="position" content="3">
				</li>
			</ol>
		</div>
	</nav>

Itérations précédentes

<nav id="wb-bc" property="breadcrumb">
		<h2>Vous êtes ici:</h2>
		<div class="container">
			<ol class="breadcrumb" typeof="BreadcrumbList">
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://www.canada.ca/fr.html">
						<span property="name">Canada.ca</span>
					</a>
					<meta property="position" content="1">
				</li>
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://wet-boew.github.io/GCWeb/index-fr.html">
						<span property="name">GCWeb accueil</span>
					</a>
					<meta property="position" content="2">
				</li>
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://wet-boew.github.io/GCWeb/méli-mélo/méli-mélo-fr.html">
						<span property="name">GCWeb accueil</span>
					</a>
					<meta property="position" content="3">
				</li>
			</ol>
		</div>
	</nav>