Related components
Footer for placing the Government of Canada branded footer landmark.
Header for placing the Government of Canada branded header landmark.
Top navigation for guiding navigation through a website using a landmark.
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 component preview
Breadcrumbs is a required component for Canada.ca pages.
Check out use cases for breadcrumbs to see if they fit the problem you're solving for.
Problems breadcrumbs solve
Use breadcrumbs to signal a visitor's current location and give them a sense of place in the navigation model, and to:
- Provide a linear way to move between multiple levels of a website.
- Surface part of the site's structure to help people understand where to find what they need.
- Situate the current page in relation to its parent in the site structure.
- Organize websites in a hierarchy of more than two levels.
Help us improve
Have questions or a request? Give feedback on our contact form.
Something's wrong? Raise it through GitHub with an