menuSelect

Single-select dropdown menu for faceted filtering

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.

Show properties

item · Template

Template for each option. Receives label, value, count, isRefined.

defaultOption · Template

Template for the default “see all” option.

cssClasses · object

CSS classes to add to the widget elements.

Show properties

root · string | string[]

CSS class for the root element.

noRefinementRoot · string | string[]

CSS class when no refinements are available.

select · string | string[]

CSS class for the select element.

option · string | string[]

CSS class for each option element.

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.