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:

If the breadcrumb is truncated, and focus is with the "More" menu, the following custom keyboard navigation is available:

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.

Examples

Because the breadcrumb javascript only expects one breadcrumb to be in use at a time, the truncated example's "More" button/menu does not work. You can test the "More" button/menu functionality by trying out the breadcrumb at the top of this page.

Parent

Grandparent

Truncated