Breadcrumbs
<gcds-breadcrumbs>

Also called: breadcrumb trail.

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

• GitHub
• Figma

Build a breadcrumbs component

Use breadcrumbs to indicate the location of the current page in relation to its parents in the site structure.

Coding and accessibility for breadcrumbs

Start with the Canada.ca link and the homepage link

• Maintain the Canada.ca link as the default first breadcrumbs link for most websites and pages.

• Opt to replace the Canada.ca link with the homepage link on transactional pages and stand alone websites or products. To remove the Canada.ca link at the head of the breadcrumbs, set the hide-canada-link attribute to true.

Tip: For a process that does not have a traditional landing page, link to the starting page of the process.

Place breadcrumbs before the <main> element

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

Use breadcrumb items for breadcrumbs links

Add a new breadcrumbs link to the breadcrumbs component by using the <gcds-breadcrumbs-item> component. The link can be added through the href property.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: Following standard practice, the code builder uses English for all code elements.