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

Breadcrumbs anatomy

1. The Canada.ca link navigates to the Canada.ca home page in the current language.
2. The chevron sits between each link and points to the next/subordinate link.
3. The home page link navigates back to the home page of the current webpage or site.
4. The parent page link navigates to the parent page of the current page. You can have up to three parent page links in addition to the homepage and the Canada.ca home or 5 in total.

Breadcrumbs anatomy – with header and H1 title

1. The header is part of a trusted brand — for apps, forms, or other transactional digital services.
2. The home page link navigates back to the home page of the current webpage or site.
3. The parent page link navigates to the parent page of the current page. You can have up to three parent page links in addition to the homepage and the Canada.ca home or 5 in total.
4. The H1 title is a separate element from the breadcrumbs component. It tells readers what the page or site is about and acts a signpost, giving them a sense of place.

Design and accessibility for breadcrumbs

Include the right links in your breadcrumbs

• 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.