Language selection


Breadcrumb trail: 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'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.

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 "" as the text of the first breadcrumb link on standard and campaign pages.

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.

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

Reflect the title of the page in the breadcrumb label.

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.

Design specifications


Code breadcrumbs as an ordered list.

Breadcrumb structure

Here are some examples of breadcrumbs for different locations on

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


Visual examples

Global header with breadcrumb trail - large screen
Image description: global header with breadcrumb trail - large screen

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

Global header – small screen
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.


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

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.

Latest changes

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

Page details

Date modified: