Breadcrumb trail

Status: Stable
Version: 1.1.0
Type: Canada.ca site functionality

Introduction

Purpose

The purpose of the breadcrumb trail is to reinforce a visitor’s current location in the Canada.ca user navigation model. It indicates the location of the current page in relation to its parent in the site structure. It also provides a simple method to navigate to higher levels in the site structure.

Evaluation and report

There is no evaluation and report available for this component.

Guidance

Breadcrumb trail

Variants

This component supports only 1 variant:

Breadcrumb trail (default)

Breadcrumb trail (default)

Iteration 2

Here is a list of changes that happened since the previous iteration:

Breaking	n/a
Additions	n/a
Fixes	Styles: changing levels separator from a greater-than sign (>) to a chevron right icon ()

Working example(s)

Refer to the breadcrumb trail at the top of this page.

How to implement

The first item is always “Canada.ca”, which always links to the Canada.ca home page in the current language
The current page is never displayed at the end of the breadcrumb trail
Use a chevron right icon () to separate levels
Longer page titles are to be shortened where possible to reduce the space required to display the trail

Each page or section name on the Canada.ca site should be associated with a shortened version of the name, for the purposes of breadcrumb and other navigation systems.

For example, when on the “Planning a business” page in the Business and industry theme, the breadcrumb trail will be:

Canada.ca > Business > Starting a business

Note: GCWeb vX.0 are no longuer compatible with the pre 2019 megamenu pattern (GCWEB v4.x) that was taking the full page width.

Recommendation: The page title should not be included within the breadcrumbs list items.

Code sample (same as iteration 1)

Here is the html output with structured data in RDFa format for the above breadcrumb example:

<nav id="wb-bc" property="breadcrumb">
		<h2>You are here:</h2>
		<div class="container">
			<ol class="breadcrumb" typeof="BreadcrumbList">
				<li property="itemListElement" typeof="ListItem">
					<a property="item" typeof="WebPage" href="https://www.canada.ca/en.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-en.html">
						<span property="name">GCWeb home</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-en.html">
						<span property="name">Méli-mélo</span>
					</a>
					<meta property="position" content="3">
				</li>
			</ol>
		</div>
	</nav>

Previous iterations

Iteration 1

Code sample