atomic-breadbox

This is for:

Developer

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

breadcrumb-button

A single breadcrumb button.

breadcrumb-clear

The button to clear individual filters.

breadcrumb-label

The breadcrumb label, associated with the facet.

breadcrumb-list

The list of breadcrumb buttons.

breadcrumb-list-container

The container of the list of breadcrumb buttons.

breadcrumb-value

The breadcrumb formatted value.

clear

The button to clear all filters.

container

The container of the whole component, list & label.

label

The "Filters" label.

show-less

The button to display less breadcrumbs.

show-more

The button to display all breadcrumbs.

CSS Custom Content

Name Description

--atomic-rating-icon-active-color

Color of the icon when active.

--atomic-rating-icon-inactive-color

Color of the icon when inactive.

--atomic-rating-icon-outline

Color of the icon’s outline.