Nav: Breadcrumbs

This component is used to help users understand where they currently are on the website and move between different page levels.

Usage Criteria

This component helps users understand where they currently are within the website's structure and aids in navigation between the page levels.

Do's and Don'ts

• Begin using breadcrumbs on pages that are L3 (Level 3) and lower; L1s and L2s do not require breadcrumbs
• Do not use this component anywhere other than the top of the page (directly under the global navigation)
• Do not use this component more than once per page

Design Notes

A note on page hierarchy: L1 pages are the surface level pages that users can easily access and usually serve as funnels to go deeper into other pages on the website. As the pages get deeper, they are defined by lower levels.

An example of this is the Media Overview page (L1). From here, you can go deeper into News Releases (L2), which is also a part of the media section but a level lower because of the path that is taken to get to the page on the site. 

We start using breadcrumbs at L3 pages because L1 and L2 pages still surface level and do not require as much help for the users to understand where they are.

Configurable Options

This component has options to configure the number of levels the breadcrumb will display through the Navigation start level dropdown. There is also the option for Show hidden navigation items, which will show levels that do not hold any actual page content but act as a parent for other page levels.

Developer Notes

Designer Notes