Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
Starts with the "Home" page and links users to parent-level pages in the IA
The chevrons between the names shows the visual hierarchy between pages.
Indicates the current page the user is viewing.
Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.
Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus.
If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.
For mobile resolutions (under 768px), the breadcrumb shows a link to the immediate parent and current page only.
All components are responsive and meet WCAG 2.1 AA accessibility guidelines.