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 L2 (Level 2) and lower; L1s 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 Get Encore Rewards page (L1). From here, you can go deeper into PlayPlanner (L2), which is also a part of the Get Encore Rewards section but a level lower because of the path that is taken to get to the page. 

We start using breadcrumbs on L2 pages because L1 pages are 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 stepper. 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