menuSelect

Lets users refine search results using a drop-down menu.

Signature

menuSelect({
  container: string | HTMLElement,
  attribute: string,
  // Optional parameters
  limit?: number,
  sortBy?: string[] | function,
  templates?: object,
  cssClasses?: object,
  transformItems?: function,
});

Import

Package manager

import { menuSelect } from "instantsearch.js/es/widgets";

const { menuSelect } = instantsearch.widgets;
// or directly use instantsearch.widgets.menuSelect()

See this widget in action

Preview this widget and its behavior.

About this widget

The menuSelect widget allows a user to select a single value to refine inside a select element.

Requirements

The attribute provided to the widget must be in attributes for faceting, either on the dashboard or using the attributesForFaceting parameter with the API.

Examples

JavaScript

menuSelect({
  container: "#menu-select",
  attribute: "brand",
});

Options

container · string | HTMLElement · required

The CSS Selector or HTMLElement to insert the widget into.

string

menuSelect({
  // ...
  container: "#menu-select",
});

menuSelect({
  // ...
  container: document.querySelector("#menu-select"),
});

attribute · string · required

The name of the attribute in the record.

JavaScript

menuSelect({
  // ...
  attribute: "brand",
});

limit · number · default: 10

The maximum number of values to display.

JavaScript

menuSelect({
  // ...
  limit: 20,
});

sortBy · string[] | function · default: "Uses facetOrdering if set, ['name:asc']"

How to sort refinements. Must be one or more of the following strings:

• "count:asc"
• "count:desc"
• "name:asc"
• "name:desc"
• "isRefined"

It’s also possible to give a function, which receives items two by two, like JavaScript’s Array.sort.

If facetOrdering is set for this facet in renderingContent, and no value for sortBy is passed to this widget, facetOrdering is used, and the default order as a fallback.

string[]

menuSelect({
  // ...
  sortBy: ["isRefined"],
});

menuSelect({
  // ...
  sortBy(a, b) {
    return a.name < b.name ? 1 : -1;
  },
});

templates · object

The templates to use for the widget.

JavaScript

menuSelect({
  // ...
  templates: {
    // ...
  },
});

cssClasses · object · default: "{}"

TThe CSS classes you can override:

• root. The root element of the widget.
• noRefinementRoot. The root element if there are no refinements.
• select. The select element.
• option. The option elements of the select.

JavaScript

menuSelect({
  // ...
  cssClasses: {
    root: "MyCustomMenuSelect",
    select: [
      "MyCustomMenuSelectElement",
      "MyCustomMenuSelectElement--subclass",
    ],
  },
});

transformItems · function · default: "items => items"

A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.

The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.

JavaScript

menuSelect({
  // ...
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }));
  },
});

Templates

You can customize parts of a widget’s UI using the Templates API.

Each template includes an html function, which you can use as a tagged template. This function safely renders templates as HTML strings and works directly in the browser—no build step required. For details, see Templating your UI.

The html function is available in InstantSearch.js version 4.46.0 or later.

item · string | function

The template to customize each option element. It exposes:

• label: string. The label to display in the option.
• value: string. The value for the option.
• count: number. The number of hits that match this value.
• isRefined: boolean. Indicates if it’s the current refined value.

function

menuSelect({
  // ...
  templates: {
    item(item, { html }) {
      return html`<span
        >${item.label} - (${item.count.toLocaleString()})</span
      >`;
    },
  },
});

// String-based templates are deprecated, use functions instead.
menuSelect({
  // ...
  templates: {
    item: "{{label}} ({{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}})",
  },
});

defaultOption · string | function

The template to customize the first option of the select.

function

menuSelect({
  // ...
  templates: {
    defaultOption(data, { html }) {
      return html`<span>See all</span>`;
    },
  },
});

// String-based templates are deprecated, use functions instead.
menuSelect({
  // ...
  templates: {
    defaultOption: "See all",
  },
});

HTML output

HTML

<div class="ais-MenuSelect">
  <select class="ais-MenuSelect-select">
    <option class="ais-Menu-option">Apple (50)</option>
    <!-- more items -->
  </select>
</div>

Customize the UI with connectMenu

If you want to create your own UI of the menuSelect widget, you can use connectors.

This connector is also used to build the menu widget.

To use connectMenu, you can import it with the declaration relevant to how you installed InstantSearch.js.

Package manager

import { connectMenu } from "instantsearch.js/es/connectors";

const { connectMenu } = instantsearch.connectors;
// or directly use instantsearch.connectors.connectMenu()

Then it’s a 3-step process:

JavaScript

// 1. Create a render function
const renderMenuSelect = (renderOptions, isFirstRender) => {
  // Rendering logic
};

// 2. Create the custom widget
const customMenuSelect = connectMenu(renderMenuSelect);

// 3. Instantiate
search.addWidgets([
  customMenuSelect({
    // instance params
  }),
]);

Create a render function

This rendering function is called before the first search (init lifecycle step) and each time results come back from Algolia (render lifecycle step).

JavaScript

const renderMenuSelect = (renderOptions, isFirstRender) => {
  const { items, canRefine, refine, sendEvent, widgetParams } = renderOptions;

  if (isFirstRender) {
    // Do some initial rendering and bind events
  }

  // Render the widget
};

If SEO is important for your search page, ensure that your custom HTML is optimized for search engines:

• Use <a> tags with href attributes to allow search engine bots to follow links.
• Use semantic HTML and include structured data when relevant.

For more guidance, see the SEO checklist.

Rendering options

items · object[]

The elements that can be refined for the current search results. With each item:

• value: string. The value of the menu item.
• label: string. The label of the menu item.
• count: number. The number of matched results after a refinement is applied.
• isRefined: boolean. Indicates if the refinement is applied.

JavaScript

const renderMenuSelect = (renderOptions, isFirstRender) => {
  const { items } = renderOptions;

  document.querySelector("#menu-select").innerHTML = `<select>
      ${items
        .map((item) => `<option value="${item.value}">${item.label}</option>`)
        .join("")}
    </select>
  `;
};

canRefine · boolean

Returns true if a refinement can be applied.

JavaScript

const renderMenuSelect = (renderOptions, isFirstRender) => {
  const { items, canRefine } = renderOptions;

  document.querySelector("#menu-select").innerHTML = `
    <select ${!canRefine ? "disabled" : ""}>
      ${items
        .map((item) => `<option value="${item.value}">${item.label}</option>`)
        .join("")}
    </select>
  `;
};

refine · function

Sets the refinement and triggers a search.

JavaScript

const renderMenuSelect = (renderOptions, isFirstRender) => {
  const { items, refine } = renderOptions;
  const container = document.querySelector("#menu-select");

  if (isFirstRender) {
    const select = document.createElement("select");

    select.addEventListener("change", (event) => {
      refine(event.target.value);
    });

    container.appendChild(select);
  }

  container.querySelector("select").innerHTML = `
    <option value="">See all</option>
    ${items
      .map(
        (item) =>
          `<option
            value="${item.value}"
            ${item.isRefined ? "selected" : ""}
          >
            ${item.label}
          </option>`,
      )
      .join("")}
  `;
};

sendEvent · (eventType, facetValue) => void

The function to send click events. The click event is automatically sent when refine is called. To learn more, see the insights middleware.

• eventType: 'click'
• facetValue: string

JavaScript

// For example,
sendEvent("click", "Apple");

/*
  A payload like the following will be sent to the `insights` middleware.
  {
    eventType: 'click',
    insightsMethod: 'clickedFilters',
    payload: {
      eventName: 'Filter Applied',
      filters: ['brand:"Apple"'],
      index: '',
    },
    widgetType: 'ais.menu',
  }
*/

widgetParams · object

All original widget options forwarded to the render function.

JavaScript

const renderMenuSelect = (renderOptions, isFirstRender) => {
  const { widgetParams } = renderOptions;

  widgetParams.container.innerHTML = "...";
};

// ...

search.addWidgets([
  customMenuSelect({
    container: document.querySelector("#menu-select"),
  }),
]);

Create and instantiate the custom widget

First, create your custom widgets using a rendering function. Then, instantiate them with parameters.

There are two kinds of parameters you can pass:

• Instance parameters. Predefined options that configure Algolia’s behavior.
• Custom parameters. Parameters you define to make the widget reusable and adaptable.

Inside the renderFunction, both instance and custom parameters are accessible through connector.widgetParams.

JavaScript

const customMenuSelect = connectMenu(
  renderMenuSelect
);

search.addWidgets([
  customMenuSelect({
    attribute: string,
    // Optional parameters
    limit: number,
    sortBy: string[] | function,
    transformItems: function,
  })
]);

Instance options

attribute · string · required

The name of the attribute in the record.

JavaScript

customMenuSelect({
  attribute: "brand",
});

limit · number · default: 10

The maximum number of values to display.

JavaScript

customMenuSelect({
  // ...
  limit: 20,
});

sortBy · string[] | function · default: "['isRefined', 'name:asc']"

How to sort refinements. Must be one or more of the following strings:

• "count:asc"
• "count:desc"
• "name:asc"
• "name:desc"
• "isRefined"

It’s also possible to give a function, which receives items two by two, like JavaScript’s Array.sort.

string[]

customMenuSelect({
  // ...
  sortBy: ["name:asc"],
});

customMenuSelect({
  // ...
  sortBy(a, b) {
    return a.name < b.name ? 1 : -1;
  },
});

transformItems · function · default: "items => items"

A function that receives the list of items before they are displayed. It should return a new array with the same structure. Use this to transform, filter, or reorder the items.

The function also has access to the full results data, including all standard response parameters and parameters from the helper, such as disjunctiveFacetsRefinements.

JavaScript

customMenuSelect({
  // ...
  transformItems(items) {
    return items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }));
  },
});

Full example

HTML

<div id="menu-select"></div>

// Create the render function
const renderMenuSelect = (renderOptions, isFirstRender) => {
  const { items, canRefine, refine, widgetParams } = renderOptions;

  if (isFirstRender) {
    const select = document.createElement("select");

    select.addEventListener("change", (event) => {
      refine(event.target.value);
    });

    widgetParams.container.appendChild(select);
  }

  const select = widgetParams.container.querySelector("select");

  select.disabled = !canRefine;

  select.innerHTML = `
    <option value="">See all</option>
    ${items
      .map(
        (item) =>
          `<option
            value="${item.value}"
            ${item.isRefined ? "selected" : ""}
          >
            ${item.label}
          </option>`,
      )
      .join("")}
  `;
};

// Create the custom widget
const customMenuSelect = connectMenu(renderMenuSelect);

// Instantiate the custom widget
search.addWidgets([
  customMenuSelect({
    container: document.querySelector("#menu-select"),
    attribute: "brand",
  }),
]);