Menu | React InstantSearch V6 (Deprecated)
Signature
<Menu attribute={string} // Optional parameters defaultRefinement={string} facetOrdering={boolean} limit={number} showMore={boolean} showMoreLimit={number} searchable={boolean} transformItems={function} translations={object} />
About this widget
The Menu
widget displays a menu that lets the user choose a single value for a specific attribute.
As the Menu
widget is internally based on a hierarchical refinement, you can not refine on a value including the default separator (>
). Instead, you can use the hierarchical-menu
widget.
Requirements
The attribute provided to the widget must be in attributes for faceting, either on the dashboard) or using attributesForFaceting
with the API.
Examples
1
2
3
import { Menu } from 'react-instantsearch-dom';
<Menu attribute="brand" />
Props
attribute
string
The name of the attribute in the record.
1
<Menu attribute='brand' />
defaultRefinement
string
The value of the item selected by default.
1
2
3
4
<Menu
// ...
defaultRefinement="Apple"
/>
facetOrdering
boolean
Apply the rules of renderingContent.facetOrdering
for this widget.
1
2
3
4
<Menu
// ...
facetOrdering
/>
limit
number
How many 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
<Menu
// ...
limit={20}
/>
showMore
boolean
Whether to display a button that expands the number of items.
1
2
3
4
<Menu
// ...
showMore
/>
showMoreLimit
number
The maximum number of displayed items. Only used when #{showMore} is set to true
.
1
2
3
4
<Menu
// ...
showMoreLimit={30}
/>
searchable
boolean
Whether to add a search input to let the user search for more facet values.
To make this feature work, you need to make the attribute searchable using the dashboard) or using the searchable
modifier of attributesForFaceting
with the API.
Note that this feature is not available if you’re using Multi Index Search.
1
2
3
4
<Menu
// ...
searchable
/>
transformItems
function
Modifies the items being displayed, for example, to filter or sort them. It takes items as argument and expects them back in return.
1
2
3
4
5
6
7
8
9
<Menu
// ...
transformItems={items =>
items.map(item => ({
...item,
label: item.label.toUpperCase(),
}))
}
/>
translations
object
A mapping of keys to translation values.
showMore
: the label of the “Show more” button. Accepts one boolean parameter that istrue
if the values are expanded,false
otherwise.noResults
: the label of the no results text when no results are found after a search for facet values.
1
2
3
4
5
6
7
8
9
<Menu
// ...
translations={{
showMore(expanded) {
return expanded ? 'Show less' : 'Show more';
},
noResults: 'No results',
}}
/>