Skip to main content
The Breadcrumb connector provides the logic to build a custom widget that displays a breadcrumb navigation for hierarchical facets.

​
Usage

import { connectBreadcrumb } from 'instantsearch.js/es/connectors';

const customBreadcrumb = connectBreadcrumb(
  (renderOptions, isFirstRender) => {
    const { items, refine, widgetParams } = renderOptions;
    const { container } = widgetParams;
    
    container.innerHTML = `
      <ul>
        <li>
          <a href="#" data-value="">Home</a>
        </li>
        ${items.map((item, index) => `
          <li>
            <span>&gt;</span>
            ${item.value ? `
              <a href="#" data-value="${item.value}">${item.label}</a>
            ` : `
              <span>${item.label}</span>
            `}
          </li>
        `).join('')}
      </ul>
    `;
    
    container.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        refine(e.target.dataset.value || null);
      });
    });
  }
);

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

​
Connector Options

​
attributes
string[]
required
Attributes to use to generate the hierarchy of the breadcrumb.
​
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
(items: object[]) => object[]
Function to transform the items passed to the templates.

​
Render Options

​
items
Array<BreadcrumbItem>
Array of objects defining the different values and labels.Each item has:
  • label: Label of the category or subcategory
  • value: Value of breadcrumb item (null for the last item)
​
refine
(value: string | null) => void
Sets the path of the hierarchical filter and triggers a new search.
​
createURL
(value: string | null) => string
Creates the URL for a single item name in the list.
​
canRefine
boolean
true if refinement can be applied.
​
widgetParams
object
The options passed to the connector.