atomic-breadbox (Deprecated)
atomic-breadbox (Deprecated)
|
Atomic v1 has been deprecated. We recommend using the latest version of the Coveo Atomic library. |
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
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. |
Very useful
Not really