InstantSearch specs

✏️ edit page

HierarchicalMenu

Widget example

HTML output

<div class="ais-HierarchicalMenu">
  <div class="ais-HierarchicalMenu-searchBox">
    <!-- SearchBox widget here -->
  </div>
  <ul class="ais-HierarchicalMenu-list ais-HierarchicalMenu-list--lvl0">
    <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected">
      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected" href="#">
        <span class="ais-HierarchicalMenu-label">Appliances</span>
        <span class="ais-HierarchicalMenu-count">4,306</span>
      </a>
      <ul class="ais-HierarchicalMenu-list ais-HierarchicalMenu-list--child ais-HierarchicalMenu-list--lvl1">
        <li class="ais-HierarchicalMenu-item">
          <a class="ais-HierarchicalMenu-link" href="#">
            <span class="ais-HierarchicalMenu-label">Dishwashers</span>
            <span class="ais-HierarchicalMenu-count">181</span>
          </a>
        </li>
        <li class="ais-HierarchicalMenu-item">
          <a class="ais-HierarchicalMenu-link" href="#">
            <span class="ais-HierarchicalMenu-label">Fans</span>
            <span class="ais-HierarchicalMenu-count">91</span>
          </a>
        </li>
      </ul>
    </li>
    <li class="ais-HierarchicalMenu-item">
      <a class="ais-HierarchicalMenu-link" href="#">
        <span class="ais-HierarchicalMenu-label">Audio</span>
        <span class="ais-HierarchicalMenu-count">1,570</span>
      </a>
    </li>
  </ul>
  <button class="ais-HierarchicalMenu-showMore">Show more</button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-HierarchicalMenu the root div of the widget
.ais-HierarchicalMenu--noRefinement the root div of the widget with no refinement
.ais-HierarchicalMenu-searchBox the search box of the widget
.ais-HierarchicalMenu-list the list of menu items
.ais-HierarchicalMenu-list--child the child list of menu items
.ais-HierarchicalMenu-list--lvl0 the level 0 list of menu items
.ais-HierarchicalMenu-list--lvl1 the level 1 list of menu items (and so on)
.ais-HierarchicalMenu-item the menu list item
.ais-HierarchicalMenu-item--selected the selected menu list item
.ais-HierarchicalMenu-item--parent the menu list item containing children
.ais-HierarchicalMenu-link the clickable menu element
.ais-HierarchicalMenu-link--selected the clickable menu element of a selected menu list item
.ais-HierarchicalMenu-label the label of each item
.ais-HierarchicalMenu-count the count of values for each item
.ais-HierarchicalMenu-noResults the div displayed when there are no results
.ais-HierarchicalMenu-showMore the button used to display more categories
.ais-HierarchicalMenu-showMore--disabled the disabled button used to display more categories

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
limit 10 Number of items to show
showMoreLimit 20 Number of items to show when the user clicked on "show more items"
showMore Whether or not to have the option to load more values
separator " > " Separator used in the attributes to separate level values
rootPath Prefix path to use if the first level is not the root level.
showParentLevel true Show the siblings of the selected parent level of the current refined value. This does not impact the root level.
sortBy array or function to sort the results by
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
showMoreButtonText ({ isShowingMore }) => isShowingMore ? "Show less" : "Show more" The text for the “Show more” button.