Widgets MenuSelect


The MenuSelect component displays a select that lets the user choose a single value for a specific attribute.


The attribute passed to the attribute 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: string 

the name of the attribute in the record

type: string 

the value of the item selected by default

type: numberdefault: 10

the minimum number of diplayed items

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, MenuSelect } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <MenuSelect attribute="categories" /> </InstantSearch> );

CSS classes

.ais-MenuSelect {}

the root div of the widget

.ais-MenuSelect-noRefinement {}

the root div of the widget when there is no refinement

.ais-MenuSelect-select {}

the <select>

.ais-MenuSelect-option {}

the select <option>

Translation keys


The label of the option to select to remove the refinement