Guides / Building Search UI / Ecommerce ui template / Components / Product listing page filter and nav

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).

The Breadcrumb component on desktop

Code summary

You can customize Breadcrumb in:

Usage and props

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

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:

Did you find this page helpful?
React InstantSearch v6