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
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,
Use Cases and Examples
In a commerce website, breadcrumbs help the users keep track of the selected filters during their browsing experience. Being able to confirm and adjust filtering encourages browsing.
Tony Russell-Rose, Tyler Tate, Designing the Search Experience
A single breadcrumb button.
The button to clear individual filters.
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
Color of the icon when active.
Color of the icon when inactive.