HierarchicalMenu | React InstantSearch V6 (Deprecated)

Signature

<HierarchicalMenu
  attributes={string[]}
  // Optional parameters
  defaultRefinement={string}
  facetOrdering={boolean}
  limit={number}
  showMore={boolean}
  showMoreLimit={number}
  separator={string}
  rootPath={string}
  showParentLevel={boolean}
  transformItems={function}
  translations={object}
/>

About this widget

The HierarchicalMenu widget is used to create a navigation menu based on a hierarchy of facet attributes. It’s commonly used for categories with subcategories.

Requirements

The objects to use in the hierarchical menu must follow this structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits"
  },
  {
    "objectID": "8976987",
    "name": "orange",
    "categories.lvl0": "products",
    "categories.lvl1": "products > fruits"
  }
]

You can also provide more than one path for each level:

1
2
3
4
5
6
7
8
[
  {
    "objectID": "321432",
    "name": "lemon",
    "categories.lvl0": ["products", "goods"],
    "categories.lvl1": ["products > fruits", "goods > to eat"]
  }
]

The attributes provided to the widget must be in attributes for faceting, either on the dashboard) or using attributesForFaceting with the API. By default, the separator is > (with spaces), but you can use a different one by using the separator option.

Examples

1
2
3
4
5
6
7
8
9
10
import { HierarchicalMenu } from 'react-instantsearch-dom';

<HierarchicalMenu
  attributes={[
    'categories.lvl0',
    'categories.lvl1',
    'categories.lvl2',
    'categories.lvl3',
  ]}
/>

Props

attributes

The names of the attributes inside the records.

1
2
3
4
5
6
7
8
<HierarchicalMenu
  attributes={[
    'categories.lvl0',
    'categories.lvl1',
    'categories.lvl2',
    'categories.lvl3',
  ]}
/>

defaultRefinement

The value of the item selected by default.

1
2
3
4
<HierarchicalMenu
  // ...
  defaultRefinement="Audio > Home Audio"
/>

facetOrdering

Apply the rules of renderingContent.facetOrdering for this widget.

1
2
3
4
<HierarchicalMenu
  // ...
  facetOrdering
/>

limit

The number of facet values to retrieve. When you enable the #{showMore} feature, this is the number of facet values to display before clicking the “Show more” button.

1
2
3
4
<HierarchicalMenu
  // ...
  limit={20}
/>

showMore

Whether to display a button that expands the number of items.

1
2
3
4
<HierarchicalMenu
  // ...
  showMore
/>

showMoreLimit

The maximum number of displayed items. Only used when #{showMore} is set to true.

1
2
3
4
<HierarchicalMenu
  // ...
  showMoreLimit={30}
/>

separator

The level separator used in the records.

1
2
3
4
<HierarchicalMenu
  // ...
  separator="-"
/>

rootPath

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

1
2
3
4
<HierarchicalMenu
  // ...
  rootPath="Audio > Home Audio"
/>

showParentLevel

Whether to show the siblings of the selected parent level of the current refined value.

This option doesn’t impact the root level. All root items are always visible.

1
2
3
4
<HierarchicalMenu
  // ...
  showParentLevel={false}
/>

transformItems

Modifies the items being displayed, for example, to filter or sort them. It takes items as arguments and expects them back in return.

1
2
3
4
5
6
7
8
9
<HierarchicalMenu
  // ...
  transformItems={items =>
    items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>

translations

A mapping of keys to translation values.

• showMore: the label of the “Show more” button. Accepts one boolean parameter that is true if the values are expanded, false otherwise.

1
2
3
4
5
6
7
8
<HierarchicalMenu
  // ...
  translations={{
    showMore(expanded) {
      return expanded ? 'Show less' : 'Show more';
    },
  }}
/>