Skip to main content
The menuSelect widget creates a dropdown (select element) that allows users to filter results by choosing a single facet value. It’s similar to the menu widget but uses a dropdown interface instead of a list.

​
Usage

const menuSelect = instantsearch.widgets.menuSelect({
  container: '#category-select',
  attribute: 'category',
});

search.addWidget(menuSelect);

​
Examples

​
Basic Menu Select

instantsearch.widgets.menuSelect({
  container: '#category',
  attribute: 'category',
  limit: 10,
});

​
With Custom Sorting

instantsearch.widgets.menuSelect({
  container: '#brands',
  attribute: 'brand',
  sortBy: ['count:desc', 'name:asc'],
  limit: 20,
});

​
With Transform Items

instantsearch.widgets.menuSelect({
  container: '#types',
  attribute: 'type',
  transformItems(items) {
    return items.map(item => ({
      ...item,
      label: item.label.toUpperCase(),
    }));
  },
});

​
Options

​
container
string | HTMLElement
required
CSS Selector or HTMLElement to insert the widget.
​
attribute
string
required
The name of the attribute in your records. Must be declared as an attribute for faceting.
​
limit
number
default:"10"
Maximum number of facet values to display in the dropdown.
​
sortBy
string[] | function
default:"['name:asc']"
How to sort refinements. Available values:
  • 'count:asc' / 'count:desc'
  • 'name:asc' / 'name:desc'
  • 'isRefined'
​
transformItems
function
Function to transform the items before rendering.
(items: object[]) => object[]
​
templates
object
Templates to customize the widget rendering.
​
cssClasses
object
CSS classes to add to the widget elements.

​
HTML Output

<div class="ais-MenuSelect">
  <select class="ais-MenuSelect-select">
    <option class="ais-MenuSelect-option" value="">All categories</option>
    <option class="ais-MenuSelect-option" value="electronics">Electronics (4,123)</option>
    <option class="ais-MenuSelect-option" value="clothing" selected>Clothing (2,984)</option>
    <option class="ais-MenuSelect-option" value="home">Home & Garden (1,567)</option>
  </select>
</div>

​
Requirements

The attribute must be declared as an attribute for faceting in your Algolia index settings.

Build docs developers (and LLMs) love

Get started for freeTalk to us