GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Breadcrumbs
<gcds-breadcrumbs>

Also called: breadcrumb trail.

Breadcrumbs is a path to the current page from each preceding level of the site's hierarchy.

  • Required on Canada.ca

  • GitHub
  • Figma

Breadcrumbs component preview

  1. The first link in the breadcrumbs defaults to the Canada.ca home page. For other sites, the link can be changed.
  2. The chevron separates each link and points to a child link.
  3. The link navigates to a parent-level page.
Breadcrumbs with two links side by side and a right-pointing chevron between them. Each individual element of the component has a number pointing to it.

Design and accessibility for breadcrumbs

Check breadcrumbs requirements

Here's what's required for breadcrumbs on GC sites.

  • Breadcrumbs are required in the header on Canada.ca standard and campaign pages.
  • Breadcrumbs are optional for other Canada.ca pages and GC sites.
Always include the breadcrumbs in the header of standard and campaign pages on Canada.ca and maintain default settings.
  • Keep the placement aligned to the left, directly below the divider line.
  • Keep the Canada.ca homepage as the first link in the breadcrumbs.
  • Leave out the current page at the end of the breadcrumb trail.
  • Shorten the link text to improve readability and reduce space.
  • On a campaign page you can link to a specific landing page as the first link. This could be the Canada.ca home page, the topic tree (Canada.ca topic categories), the institutional/organizational profile, or a campaign index page.
  • Include only parent page links and leave out the current page. It's stated in the page title, just beneath the breadcrumbs.
  • Add up to 3 parent page links if using both the Canada.ca and home page links, for a maximum of 5 breadcrumbs links.
  • Avoid duplication by linking each breadcrumb to a unique page.

Structure breadcrumb levels based on site navigation

Breadcrumbs represent the location of the current page in relation to the site's navigation model.

  • Order breadcrumb levels by their corresponding level in the site's hierarchy.
  • Avoid using the breadcrumbs component to show progress through the user journey.
  • Limit breadcrumbs to 5 levels. Displaying too many levels of breadcrumbs items can be overwhelming.

Tip: If using with other navigation components, like the top navigation and side navigation, align both sets of links, so elements reflect a similar path through the site. This provides a consistent navigation experience and helps visitors understand their current location.

Write specific parent page link text

  • Make link text clear and specific to help a person decide if they should leave the current page. Spell out where a person will go or what they'll find when they select a link.
  • Keep parent link text short (ideally under 20 characters) and distinctive so a person can scan the links in the breadcrumbs and find what they're looking for.
  • Shorten parent page link text to improve readability and reduce space. Where possible, reflect the title of the page in the breadcrumb without including the full page name.

Place breadcrumbs before the main element

Place breadcrumbs at the top of a page, before the main content. This way a skip-to-content link can work to let a person skip all navigation links, including breadcrumbs.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-07-17