Breadcrumb
The breadcrumb component is a tertiary navigation that helps users understand where in the page structure they are currently at. Inspiration taken from the WAI Aria Practices 1.1 breadcrumb example.
Usage
The breadcrumb navigation is automatically included in the page layout, and is placed within the <main> column above all page content.
Structure & styles
The breadcrumb component can be rendered differently depending on how deep within the page structure it's being used. The styles will also change on mobile viewports to more cleanly display the information.
Regular
By default, the breadcrumb will have links to the parent page or the grandparent and parent pages, and the name of the current page, horizontally and separated by forward slashes. On smaller viewports, the parent page will be displayed as back button to the left, and if a grandparent page is included, it will displayed to the right (the homepage will be styled as a home icon to preserve space).
Truncated
When the current page is 4 or more levels deep, all pages higher than the parent page will be truncated within a "More" menu. Clicking on the "More" button will open up the menu showing all pages higher than the parent page. On smaller viewports, this button/menu will be displayed to the right as a 3 vertical dots icon.
Javascript
All breadcrumb navigations support custom keyboard navigation:
- Home - Focuses the first link within the breadcrumb
- Left arrow - Focuses the previous link within the breadcrumb, looping back to the last link.
- Right arrow - Focuses the next link within the breadcrumb, looping back to the first link.
- End - Focuses the last link with the breadcrumb.
If the breadcrumb is truncated, and focus is with the "More" menu, the following custom keyboard navigation is available:
- Home - Focuses the first link within the menu
- Up arrow - Focuses the previous link within the menu, looping back to the last link of the menu.
- Down arrow - Focuses the next link within the menu, looping back to the first link of the menu.
- End - Focuses the last link with the menu.
T4 implementation
The breadcrumb component is not tied to a specific content type. Its styles are included in the Compass T4 page layout CSS, and is used by the page layout at the top of the main column on any page except the homepage. The breadcrumb will automatically populate and update based on your site's section structure.