Breadcrumbs

The breadcrumbs component allows customization of the displayed text for the current level or page via currentleveltext.

Links between the home icon and the current level can be added as slotted content by following the pattern provided.

<bolt-breadcrumbs currentleveltext="Current level">
    <li><a href="link1">Previous level 1</a></li>
    <li><a href="link2">Previous level 2</a></li>
    <li><a href="link3">Previous level 3</a></li>
</bolt-breadcrumbs>

The home icon cannot be changed, but its destination can be set using iconlink.

<bolt-breadcrumbs
  currentleveltext="Current level"
  iconlink="https://nationwide.com"
>
  <li><a href="link1">Previous level 1</a></li>
  <li><a href="link2">Previous level 2</a></li>
  <li><a href="link3">Previous level 3</a></li>
</bolt-breadcrumbs>

The bolt-breadcrumbs custom element provides a wrapper around a home icon link, a list of links leading to the current page, and the name of the current level.

• currentleveltext: required. Sets the "Current level" breadcrumb text, and should represent the current page the user is on.
• iconlink: optional. Defaults to empty string (''). Sets the href value for the home icon link.

The breadcrumbs' default slot should contain only list items with links.

Each breadcrumb link in the slot should adhere to the following pattern:

<li><a href="...">...</a></li>

• Breadcrumbs are most commonly used on large websites with a hierarchy of more than two levels.
• Breadcrumbs should show progress from the highest navigation level to the lowest without skipping levels.
• Breadcrumbs should be placed in the top left corner, typically above the page title.
• Breadcrumbs shouldn't visually overwhelm the page.
• Breadcrumbs should exist on every Level 2 or lower page.

• Use Breadcrumbs when users are likely to have landed on the page from an external source.
• Use Breadcrumbs when users must navigate through a complex site or product.

• Avoid Breadcrumbs if there is a flat hierarchy that is only 1 or 2 levels deep.
• Avoid path-based Breadcrumb navigation as a "history trail."

• Use other components for primary navigation; Breadcrumbs should be a supplement.

• Use exact section names without shortening whenever possible.
  • When not possible, provide a short and human-readable version for long page titles.
• Use sentence case for Breadcrumb list items.
• Use an Icon, not a labeled Link, to access the home screen with Breadcrumb navigation.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.