Breadcrumb trail: Canada.ca design system
- Last updated: 2023-06-26
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.
On this page
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.
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:
Include "You are here:" as invisible help text.
When selected, each breadcrumb should bring the user to a unique page.
- 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
- vertical padding: 13px
- horizontal padding: 2px
- margin top: 15px
- line-height: 23px
- Icon: glyphicon-chevron-right
Code breadcrumbs as an ordered list.
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.
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.
Determine what best suits the type of page you're creating. Refer to your implementation's guidance if you want to exclude breadcrumbs.
For the Government of Canada Adobe Experience Manager (AEM):
For the Centrally Deployed Templates Solution (CDTS):
For Drupal WxT:
Research and rationale
Consult research findings and policy rationale.
- 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
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.
- Updated the guidance to include advice on what to avoid, content and design specifications, visual examples, implementation guidance, research findings and policy rationale
- Date modified: