Skip to main content
Displays a navigation breadcrumb for hierarchical facets, allowing users to see and modify their current refinement path.

​
Usage

import instantsearch from 'instantsearch.js';
import { breadcrumb } from 'instantsearch.js/es/widgets';

const search = instantsearch({
  indexName: 'instant_search',
  searchClient
});

search.addWidgets([
  breadcrumb({
    container: '#breadcrumb',
    attributes: [
      'hierarchicalCategories.lvl0',
      'hierarchicalCategories.lvl1',
      'hierarchicalCategories.lvl2'
    ]
  })
]);

search.start();

​
Parameters

​
container
string | HTMLElement
required
CSS selector or HTMLElement to insert the widget.
​
attributes
string[]
required
Array of attribute names to use for generating the breadcrumb hierarchy.
​
separator
string
default:">"
The level separator used in the records.
​
rootPath
string
Prefix path to use if the first level is not the root level.
​
transformItems
function
Function to transform the items passed to the templates.
(items: BreadcrumbItem[]) => BreadcrumbItem[]
​
templates
object
Templates to use for the widget.
​
cssClasses
object
CSS classes to add to the widget elements.

​
Examples

​
Custom separator

breadcrumb({
  container: '#breadcrumb',
  attributes: [
    'hierarchicalCategories.lvl0',
    'hierarchicalCategories.lvl1',
    'hierarchicalCategories.lvl2'
  ],
  templates: {
    separator: ' / '
  }
});

​
With root path

breadcrumb({
  container: '#breadcrumb',
  attributes: [
    'hierarchicalCategories.lvl0',
    'hierarchicalCategories.lvl1',
    'hierarchicalCategories.lvl2'
  ],
  rootPath: 'Products',
  templates: {
    home: 'All Products'
  }
});

​
HTML output

<div class="ais-Breadcrumb">
  <ul class="ais-Breadcrumb-list">
    <li class="ais-Breadcrumb-item">
      <a class="ais-Breadcrumb-link" href="#">Home</a>
      <span class="ais-Breadcrumb-separator">></span>
    </li>
    <li class="ais-Breadcrumb-item">
      <a class="ais-Breadcrumb-link" href="#">Appliances</a>
      <span class="ais-Breadcrumb-separator">></span>
    </li>
    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
      Dishwashers
    </li>
  </ul>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us