Skip to main content
The <HierarchicalMenu> component displays a hierarchical menu for navigating through multi-level categories.

​
Import

import { HierarchicalMenu } from 'react-instantsearch';

​
Props

​
attributes
string[]
required
The hierarchical attributes in order of nesting.
<HierarchicalMenu
  attributes={[
    'hierarchicalCategories.lvl0',
    'hierarchicalCategories.lvl1',
    'hierarchicalCategories.lvl2',
  ]}
/>
​
limit
number
default:"10"
Maximum number of items to display.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  limit={20}
/>
​
rootPath
string
The path to use as the root level.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  rootPath="Products"
/>
​
separator
string
default:">"
The separator used in the hierarchical attributes.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  separator=" > "
/>
​
showMore
boolean
default:"false"
Whether to display a “Show more” button.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  showMore={true}
/>
​
showMoreLimit
number
default:"20"
Maximum number of items to display when “Show more” is clicked.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  showMore={true}
  showMoreLimit={50}
/>
​
showParentLevel
boolean
default:"true"
Whether to show the parent level when a refinement is applied.
​
sortBy
string[] | function
How to sort the items.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  sortBy={['name:asc']}
/>
​
transformItems
function
Transform the menu items before displaying them.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>
​
translations
object
Customize the text strings.
<HierarchicalMenu
  attributes={['categories.lvl0', 'categories.lvl1']}
  translations={{
    showMoreButtonText: ({ isShowingMore }) =>
      isShowingMore ? 'Show less' : 'Show more',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, HierarchicalMenu, Breadcrumb } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  const hierarchicalAttributes = [
    'hierarchicalCategories.lvl0',
    'hierarchicalCategories.lvl1',
    'hierarchicalCategories.lvl2',
  ];

  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Breadcrumb attributes={hierarchicalAttributes} />
      <HierarchicalMenu
        attributes={hierarchicalAttributes}
        showMore={true}
        limit={10}
        showMoreLimit={20}
      />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us