InstantSearch specs

✏️ edit page

Widget example

HTML output

<div class="ais-Menu">
  <div class="ais-Menu-searchBox">
    <!-- SearchBox widget here -->
  </div>
  <ul class="ais-Menu-list">
    <li class="ais-Menu-item ais-Menu-item--selected">
      <a class="ais-Menu-link" href="#">
        <span class="ais-Menu-label">Appliances</span>
        <span class="ais-Menu-count">4,306</span>
      </a>
    </li>
    <li class="ais-Menu-item">
      <a class="ais-Menu-link" href="#">
        <span class="ais-Menu-label">Audio</span>
        <span class="ais-Menu-count">1,570</span>
      </a>
    </li>
  </ul>
  <button class="ais-Menu-showMore">Show more</button>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-Menu the root div of the widget
.ais-Menu--noRefinement the root div of the widget with no refinement
.ais-Menu-searchBox the search box of the widget
.ais-Menu-list the list of all menu items
.ais-Menu-item the menu list item
.ais-Menu-item--selected the selected menu list item
.ais-Menu-link the clickable menu element
.ais-Menu-label the label of each item
.ais-Menu-count the count of values for each item
.ais-Menu-noResults the div displayed when there are no results
.ais-Menu-showMore the button used to display more categories
.ais-Menu-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
attribute Attribute to apply the filter to
searchable Whether to add a search box to refine this list
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
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.