widgets menuSelect

Edit this page


Create a menu select out of a facet

Live example

You can find an example at the end of the page.


const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.menuSelect({ container: string|HTMLElement, attributeName: string, sortBy: [Array<string>|function], templates: [MenuSelectTemplates], limit: [number], transformData: [MenuSelectTransforms], autoHideContainer: [boolean], cssClasses: [MenuSelectCSSClasses], transformItems: [(Array<object>) => Array<object>], }: MenuSelectWidgetOptions);



  • containerstring|HTMLElement

    CSS Selector or HTMLElement to insert the widget.

  • attributeNamestring

    Name of the attribute for faceting

  • sortBy[Array<string>|function]
    Default value: ['name:asc']

    How to sort refinements. Possible values: count|isRefined|name:asc|name:desc.

    You can also use a sort function that behaves like the standard Javascript compareFunction.

  • templates[MenuSelectTemplates]

    Customize the output through templating.

  • limit[number]
    Default value: 10

    How many facets values to retrieve.

  • transformData[MenuSelectTransforms]

    Set of functions to update the data before passing them to the templates.

  • autoHideContainer[boolean]
    Default value: true

    Hide the container when there are no items in the menu select.

  • cssClasses[MenuSelectCSSClasses]

    CSS classes to add to the wrapping elements.

  • transformItems[(Array<object>) => Array<object>]

    Function to transform the items passed to the templates.


  • header[string|function]

    Header template.

  • item[string|(label, count, isRefined, value) => undefined]

    Item template, provided with label, count, isRefined and value data properties.

  • seeAllOption[string]
    Default value: 'See all'

    Label of the see all option in the select.


  • item[function]

    Method to change the object passed to the item template.


  • root[string|Array<string>]

    CSS class to add to the root element.

  • header[string|Array<string>]

    CSS class to add to the header element.

  • select[string|Array<string>]

    CSS class to add to the select element.

  • option[string|Array<string>]

    CSS class to add to the option element.


  • render[function]

    Called after each search response has been received

  • getConfiguration[function]

    Let the widget update the configuration of the search with new parameters

  • init[function]

    Called once before the first search


    container: '#categories-menuSelect',
    attributeName: 'hierarchicalCategories.lvl0',
    limit: 10,
    templates: {
      header: 'Categories'

Can't find what you are looking for? Open an issue, we'll get back to you.