atomic-breadbox (Deprecated)
atomic-breadbox (Deprecated)
The atomic-breadbox component creates breadcrumbs that display a summary of the currently active facet values.
Introduction
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.
Guidelines
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 button to clear individual filters. |
|
The breadcrumb label, associated with the facet. |
|
The list of breadcrumb buttons. |
|
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. |
|
Color of the icon’s outline. |