InstantSearch / React / V6 / API reference

Menu | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

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

Required
Type: string

The name of the attribute in the record.

1
<Menu attribute='brand' />

defaultRefinement

Optional
Type: string

The value of the item selected by default.

1
2
3
4
<Menu
  // ...
  defaultRefinement="Apple"
/>

facetOrdering

Optional
Type: boolean

Apply the rules of renderingContent.facetOrdering for this widget.

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

limit

Optional
Type: 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

Optional
Type: boolean

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

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

showMoreLimit

Optional
Type: number

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

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

searchable

Optional
Type: 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

Optional
Type: 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

Optional
Type: object

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.
  • 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',
  }}
/>
Did you find this page helpful?