Breadcrumb trail: Canada.ca design system

Mandatory on standard and campaign pages

The breadcrumb trail is a horizontal series of links that gives people a sense of where they are in relation to Canada.ca's navigation model. It represents the location of a page in relation to its parent and provides a clear way to navigate to higher levels in the site structure.

When to use

The breadcrumb trail is mandatory on all pages, except transactional pages.

What to avoid

Don't program the breadcrumb trail to be generated dynamically based on a visitor's journey to a page. It should represent the location of a page as it stands in relation to the site's navigation model.

Avoid long link labels that push content down on mobile. Use shortened versions of multi-word page titles when possible.

Don't display the current page at the end of the breadcrumb trail (linked or unlinked). It increases the length of the breadcrumb unnecessarily, especially on mobile. The heading of the page is enough to let people know where they are.

Content and design

Find content and design specifications and visual examples.

Content specifications

Align the breadcrumb trail to the left directly below the menu button (or the divider line if there is no menu button).

Use "Canada.ca" as the text of the first breadcrumb link on standard and campaign pages.

• Link to the Canada.ca home page in the language of the current page.

You can use either "Home" or the name of the process or application as the text of the first breadcrumb link on transactional pages that use a breadcrumb trail.

• Link to the starting page of the process or the landing page of the application.

Use a single right chevron icon to separate each breadcrumb link.

Reflect the title of the page in the breadcrumb label.

• Shorten breadcrumb labels where possible to improve readability and reduce space.

For example, these breadcrumbs:

Can be shortened to this:

Accessibility

Include "You are here:" as invisible help text.

Interactions

When selected, each breadcrumb should bring the user to a unique page.

Design specifications

• Type: link
• Position: top left
• Font: Noto sans
• Size: 16px
• Text colour:
  • default link: #284162
  • selected link (on hover or focus): #0535d2
  • visited link: #7834bc
• Spacing
  • vertical padding: 13px
  • horizontal padding: 2px
  • margin top: 15px
  • line-height: 23px
• Icon: glyphicon-chevron-right

Accessibility

Code breadcrumbs as an ordered list.

Breadcrumb structure

Here are some examples of breadcrumbs for different locations on Canada.ca:

Theme pages, institutional and organizational pages

First-level topic pages

Second-level topic pages

Corporate, program or policy content pages

Partnering and collaborative arrangement profile pages

Basic search pages

Advanced search pages

Campaigns and promotions

Promotion campaigns don't need a breadcrumb trail. If you add one, it can lead back to the topic tree, the Institutional/Organizational profile, or to the Home page of Canada.ca.

News

Application

Visual examples

Image description: global header with breadcrumb trail - large screen

The breadcrumbs appear under the menu button in a horizontal line.

Image description: global header with breadcrumb trail - small screen

The breadcrumbs appear under the menu button.

How to implement

Find working examples for implementing the breadcrumbs.

GCweb (WET) theme implementation reference

The implementation reference includes how to configure each element of the header.

• Breadcrumbs - GCWeb (WET) documentation
• GCWeb (WET) header documentation

Implementations

Determine what best suits the type of page you're creating. Refer to your implementation's guidance if you want to exclude breadcrumbs.

Research and rationale

Consult research findings and policy rationale.

Research findings

• Canada.ca is a trusted source
  Explains the decision to use "Canada.ca" as the label for the first link in the breadcrumb
• Wayfinding on Canada.ca research summary
  Research showing that people navigating on the site use breadcrumb links nearly twice as often as they use the Theme and topic menu

Policy rationale

The spacing specifications for the breadcrumb links are designed so that touch targets meet WCAG AAA requirements.

As part of the global header, the breadcrumb is a mandatory element under the Content and Information Architecture Specification.

• Mandatory elements of the design system

Latest changes

2023-06-26

Updated the guidance to include advice on what to avoid, content and design specifications, visual examples, implementation guidance, research findings and policy rationale