connectBreadcrumb

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'],
  }),
]);