InstantSearch specs

✏️ edit page

Widget example

HTML output

<div class="ais-Breadcrumb">
  <ul class="ais-Breadcrumb-list">
    <li class="ais-Breadcrumb-item">
      <a class="ais-Breadcrumb-link" href="#">Home</a>
    </li>
    <li class="ais-Breadcrumb-item">
      <span class="ais-Breadcrumb-separator" aria-hidden="true">></span>
      <a class="ais-Breadcrumb-link" href="#">Cooking</a>
    </li>
    <li class="ais-Breadcrumb-item ais-Breadcrumb-item--selected">
      <span class="ais-Breadcrumb-separator" aria-hidden="true">></span>
      Kitchen textiles
    </li>
  </ul>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-Breadcrumb the root div of the widget
.ais-Breadcrumb--noRefinement the root div of the widget with no refinement
.ais-Breadcrumb-list the list of all breadcrumb items
.ais-Breadcrumb-item the breadcrumb navigation item
.ais-Breadcrumb-item--selected the selected breadcrumb item
.ais-Breadcrumb-separator the separator of each breadcrumb item
.ais-Breadcrumb-link the clickable breadcrumb element

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
attributes Array of attributes to use to generate the breadcrumb
separator " > " Separator used in the attributes to separate level values
rootPath Prefix path to use if the first level is not the root level.
transformItems Function which receives the items, which will be called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, remove or reorder them

Translations

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
rootElementText "Home" The text for the breadcrumb’s starting point (for example, “Home page”).
separatorText " > " The text for the breadcrumb’s separator.