Breadcrumb | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature

<Breadcrumb
  attributes={string[]}
  // Optional parameters
  separator={React.Node}
  rootURL={string}
  transformItems={function}
  translations={object}
/>

About this widget

The Breadcrumb widget is a secondary navigation scheme that lets the user see where the current page is in relation to the facet’s hierarchy.

It reduces the number of actions a user needs to take to get to a higher-level page and improves the discoverability of the app or website’s sections and pages. It is commonly used for websites with lot of data, organized into categories with subcategories.

If you want to select a specific refinement for your Breadcrumb component, you need to use a Virtual Hierarchical Menu and set its defaultRefinement that is then used by the Breadcrumb.

Requirements

The objects to use in the breadcrumb must follow this structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits"
  },
  {
    "objectID": "8976987",
    "name": "orange",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits"
  }
]

It’s also possible to provide more than one path for each level:

1
2
3
4
5
6
7
8
[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": ["products", "goods"],
    "categories.lvl1": ["products > fruits", "goods > to eat"]
  }
]

The attributes provided to the widget must be in attributes for faceting, either on the dashboard) or using attributesForFaceting with the API. By default, the separator is > (with spaces) but you can use a different one by using the separator option.

If there is also a hierarchical-menu on the page, it must follow the same configuration.

Examples

1
2
3
4
5
6
7
8
9
10
import { Breadcrumb } from 'react-instantsearch-dom';

<Breadcrumb
  attributes={[
    'categories.lvl0',
    'categories.lvl1',
    'categories.lvl2',
    'categories.lvl3',
  ]}
/>

Props

attributes

A list of attributes to use to generate the hierarchy of the widget.

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

separator

The character used to separate the elements of the breadcrumb.

1
2
3
4
<Breadcrumb
  // ...
  separator={<span> - </span>}
/>

rootURL

The URL (used in the href attribute) for the root element of the widget. By default, clicking on the root element removes all hierarchical refinements.

1
2
3
4
<Breadcrumb
  // ...
  rootURL="/home"
/>

transformItems

Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return.

1
2
3
4
5
6
7
8
9
<Breadcrumb
  // ...
  transformItems={items =>
    items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>

translations

A mapping of keys to translation values.

• rootLabel: Label for the root element of the widget.

1
2
3
4
5
6
<Breadcrumb
  // ...
  translations={{
    rootLabel: 'Home',
  }}
/>