Widgets HierarchicalMenu


The hierarchical menu lets the user browse attributes using a tree-like structure.

This is commonly used for multi-level categorization of products on e-commerce websites. From a UX point of view, we suggest not displaying more than two levels deep.


To use this widget, your attributes must be formatted in a specific way. If you want for example to have a hiearchical menu of categories, objects in your index should be formatted this way:

[{ "objectID": "321432", "name": "lemon", "categories.lvl0": "products", "categories.lvl1": "products > fruits", }, { "objectID": "8976987", "name": "orange", "categories.lvl0": "products", "categories.lvl1": "products > fruits", }]

It’s also possible to provide more than one path for each level:

{ "objectID": "321432", "name": "lemon", "categories.lvl0": ["products", "goods"], "categories.lvl1": ["products > fruits", "goods > to eat"] }

All attributes passed to the attributes prop must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via a set settings call to the Algolia API.


type: array.<string> 

List of attributes to use to generate the hierarchy of the menu. See the example for the convention to follow.

type: booleandefault: false

Flag to activate the show more button, for toggling the number of items between limit and showMoreLimit.

type: numberdefault: 10

The maximum number of items displayed.

type: numberdefault: 20

The maximum number of items displayed when the user triggers the show more. Not considered if showMore is false.

type: stringdefault: '>'

Specifies the level separator used in the data.

type: stringdefault: null

The path to use if the first level is not the root level.

type: booleandefault: true

Flag to set if the parent level should be displayed.

type: string 

the item value selected by default

type: function 

Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.

Example usage

import React from 'react'; import { InstantSearch, HierarchicalMenu } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <HierarchicalMenu attributes={[ 'hierarchicalCategories.lvl0', 'hierarchicalCategories.lvl1', 'hierarchicalCategories.lvl2', ]} /> </InstantSearch> );

CSS classes

.ais-HierarchicalMenu {}

the root div of the widget

.ais-HierarchicalMenu-noRefinement {}

the root div of the widget when there is no refinement

.ais-HierarchicalMenu-searchBox {}

the search box of the widget. See the SearchBox documentation for the classnames and translation keys of the SearchBox.

.ais-HierarchicalMenu-list {}

the list of menu items

.ais-HierarchicalMenu-list--child {}

the child list of menu items

.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-label {}

the label of each item

.ais-HierarchicalMenu-count {}

the count of values for each item

.ais-HierarchicalMenu-showMore {}

the button used to display more categories

.ais-HierarchicalMenu-showMore--disabled {}

the disabled button used to display more categories

Translation keys


The label of the show more button. Accepts one parameter, a boolean that is true if the values are expanded