This is for:


The atomic-breadbox component creates breadcrumbs that display a summary of the currently active facet values.


The Breadbox component helps the information seeker keep track of the navigational state of the currently active facet values, located in a single place on the search page. In most cases, these are on the top of a page between the search bar and the results. Each facet value that’s displayed in the breadcrumbs will appear as individual pill styled buttons. Clearing the breadcrumbs is possible individually or all-at-once. By default, having the field name displayed before the field value helps to clarify which facet the value is from. However, in the case where there are two or less facets, you can remove the field name through the breadcrumb-label shadow part.

User Experience and Best Practices

Usage Notes

  • Include breadcrumbs in a search page when you want users to navigate the content using facets.

  • When a page has more than two facet types, we recommended that breadcrumbs should include the facet title, helping the user distinguish the source of each breadcrumb.


We display the field name to help clarify which facet the breadcrumb value associated with. However, in the case where there are two or less facets, you can remove the field name through the CSS shadow part, breadcrumb-label.

Use Cases and Examples

On an ecommerce website, breadcrumbs help the users keep track of the selected filters during their browsing experience. Being able to confirm and adjust filtering encourages browsing.

Shadow Parts

Part Description


A single breadcrumb button.


The breadcrumb label, associated with the facet.


The breadcrumb formatted value.


The button to clear all filters.


The "Filters" label.


The button to display less breadcrumbs.


The button to display all breadcrumbs.

CSS Custom Content

Name Description


Color of the icon when active.


Color of the icon when inactive.