widgets menu

Edit this page


Create a menu based on a facet. A menu displays facet values and let the user selects only one value at a time. It also displays an empty value which lets the user “unselect” any previous selection.


The attribute passed to attributeName must be declared as an attribute for faceting in your Algolia settings.

Live example

You can find an example at the end of the page or a live example in our widget showcase.


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

const widget = instantsearch.widgets.menu({ container: string|HTMLElement, attributeName: string, sortBy: [Array<string>|function], templates: [MenuTemplates], limit: [number], showMore: [boolean|MenuShowMoreOptions], transformData: [MenuTransforms], autoHideContainer: [boolean], cssClasses: [MenuCSSClasses], collapsible: [boolean|{collapsible: boolean}], transformItems: [(Array<object>) => Array<object>], }: MenuWidgetOptions);



  • 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[MenuTemplates]

    Customize the output through templating.

  • limit[number]
    Default value: 10

    How many facets values to retrieve.

  • showMore[boolean|MenuShowMoreOptions]
    Default value: false

    Limit the number of results and display a showMore button.

  • transformData[MenuTransforms]

    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.

  • cssClasses[MenuCSSClasses]

    CSS classes to add to the wrapping elements.

  • collapsible[boolean|{collapsible: boolean}]
    Default value: false

    Hide the widget body and footer when clicking on header.

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

    Function to transform the items passed to the templates.


  • header[string|function]

    Header template.

  • item[string|({count: number, cssClasses: object, isRefined: boolean, label: string, url: string, value: string}) => string]

    Item template. The string template gets the same values as the function.


  • templates[MenuShowMoreTemplates]

    Templates to use for showMore.

  • limit[number]

    Max number of facets values to display when showMore is clicked.


  • active[string]

    Template used when showMore was clicked.

  • inactive[string]

    Template used when showMore not clicked.


  • 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.

  • body[string|Array<string>]

    CSS class to add to the body element.

  • list[string|Array<string>]

    CSS class to add to the list element.

  • item[string|Array<string>]

    CSS class to add to each item element.

  • active[string|Array<string>]

    CSS class to add to each active element.

  • count[string|Array<string>]

    CSS class to add to each count element (when using the default template).


  • 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',
    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.