Skip to main content
The <Breadcrumb> component displays a navigation breadcrumb trail for hierarchical menu refinements.

​
Import

import { Breadcrumb } from 'react-instantsearch';

​
Props

​
attributes
string[]
required
The hierarchical attributes to display in order.
<Breadcrumb
  attributes={[
    'hierarchicalCategories.lvl0',
    'hierarchicalCategories.lvl1',
    'hierarchicalCategories.lvl2',
  ]}
/>
​
rootPath
string
The path to use as the root element.
<Breadcrumb
  attributes={['categories.lvl0', 'categories.lvl1']}
  rootPath="Home > Products"
/>
​
separator
string | ReactNode
default:">"
The separator to display between breadcrumb items.
<Breadcrumb
  attributes={['categories.lvl0', 'categories.lvl1']}
  separator=" / "
/>
​
transformItems
function
Transform the breadcrumb items before displaying them.
<Breadcrumb
  attributes={['categories.lvl0', 'categories.lvl1']}
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>
​
translations
object
Customize the text strings.
<Breadcrumb
  attributes={['categories.lvl0', 'categories.lvl1']}
  translations={{
    rootElementText: 'Home',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, Breadcrumb, HierarchicalMenu } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Breadcrumb
        attributes={[
          'hierarchicalCategories.lvl0',
          'hierarchicalCategories.lvl1',
          'hierarchicalCategories.lvl2',
        ]}
      />
      <HierarchicalMenu
        attributes={[
          'hierarchicalCategories.lvl0',
          'hierarchicalCategories.lvl1',
          'hierarchicalCategories.lvl2',
        ]}
      />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us