Breadcrumb

The Breadcrumb component allows users to see the product category hierarchy at a glance. It has the following advantages:

• Breadcrumbs let users go to higher levels in your hierarchy in fewer steps.
• They allow users to clear the current query and see the total number of results.

Breadcrumbs are often used on websites with a lot of data, organized into categories with subcategories (such as an ecommerce site).

Code summary

You can customize Breadcrumb in:

• The product listing page
• The Breadcrumb file
• Its props.

Usage and props

1
2
3
4
5
6
7
<Breadcrumb
  attributes={[
    'hierarchicalCategories.lvl0',
    'hierarchicalCategories.lvl1',
    'hierarchicalCategories.lvl2'
  ]}
/>

1
2
3
4
5
6
7
8
<Breadcrumb
  // Required parameters
  attributes={string[]} // A list of attributes to use to generate the hierarchy of the widget.

  // Optional parameters
  separator={React.Node} // The character used to separate the elements of the breadcrumb.
  transformItems={function} // A list of attributes to use to generate the hierarchy of the widget.
/>

Configuration

To configure the Breadcrumb component, edit the variable breadcrumbAttributes in the config.tsx file:

1
2
3
4
5
const breadcrumbAttributes = [
  'hierarchicalCategories.lvl0',
  'hierarchicalCategories.lvl1',
  'hierarchicalCategories.lvl2',
]

These attributes are used to generate the Breadcrumb hierarchy.

External packages used

The Breadcrumb component depends on these npm packages:

• jotai: the state management library (written in TypeScript).
• react-fact-compare: a package that compares the current and next props provided by the connectBreadcrumb connector and decides whether to trigger a re-render.
• react-instantsearch-dom: a package that provides the connectBreadcrumb connector used to get the breadcrumb items.