<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>
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 |
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 |
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. |