Breadcrumb trail: Canada.ca design
Last updated: 2026-02-11
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 Canada.ca’s site structure. It represents the location of a page in relation to its parent and provides a clear way to navigate up to higher levels in the site structure.
On this page
When to use
The breadcrumb trail is an element of the global header. It is mandatory on all pages, except transactional pages, error pages, and pages with content in both English and French.
What to avoid
Don’t program a breadcrumb trail to be generated dynamically based on how a visitor arrives on a page. It should represent a page’s location in 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
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.
Include the parent page links in order of their corresponding level from the current page.
Reflect the title of each page in the breadcrumb label, but shorten them where possible to improve readability and reduce space.
For example, these breadcrumb labels:
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
Align the breadcrumb trail to the left directly below the menu button, or the divider line if there is no menu button.
- Font specification: Noto sans, 16px
- Use standard link colours for breadcrumb links
- 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
Advertising or promotional campaigns
Breadcrumbs can lead back to the topic tree, a campaign landing page, the institutional landing page, or just to the Canada.ca home page.
News
Application
Error pages
For an error page, such as a 404 error (page not found) page, do not include a breadcrumb trail since:
- error pages are not normally navigated to and are not intended to be a part of the site’s navigation model
- these pages are system pages (could be considered transactional)
- error pages should have another path back to the home page, such as a link
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.
Implementations
Determine what best suits the type of page you’re creating. Refer to your implementation’s guidance if you want to exclude breadcrumbs.
GC-AEM
For the Government of Canada Adobe Experience Manager (AEM):
CDTS
For the Centrally Deployed Templates Solution (CDTS):
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 Canada.ca Specifications.
Latest changes
- Updated breadcrumb trail guidance to clarify:
- when breadcrumbs are required (and when they aren’t)
- how breadcrumbs apply to campaign pages
- which links should appear in a breadcrumb trail
- Updated the guidance to include content and design specifications, visual examples and implementation guidance.
Page details
- Date modified: