Skip to content

Breadcrumb trail

ShannonTucker edited this page Apr 5, 2022 · 6 revisions

A horizontal series of links known as a “breadcrumb trail” gives people a sense of where they are in relation to the site structure.

The links in the breadcrumb trail are not intended to reflect the path by which the visitor arrived at the current location. Rather, the links always represent the location of the current page as it stands in relation to the site’s user navigation model.

Overview

Breadcrumb image mobile and desktop

Usage

Check out the Canada.ca design system to learn when and how to use the breadcrumb trail.

How to use

  • For long title pages, shorten the bread crumb to 28 characters or less.
  • Breadcrumbs should be a maximum of 28 characters to avoid the breadcrumb wrapping onto a second line in mobile.
  • Do not use an ellipses to shorten breadcrumbs.

Accessibility

Do not use an ellipses for long breadcrumbs. Using an ellipses does not meet WCAG standards.

How we created this component - 4A Assessment

We imported the breadcrumb trail from Core GC Design Library and altered it by moving the chevron to the end of a breadcrumb rather than the beginning.

Clone this wiki locally