Skip to main content
The <Menu> component displays a list of facet values where users can select a single value to refine their search.

​
Import

import { Menu } from 'react-instantsearch';

​
Props

​
attribute
string
required
The attribute to create the menu from.
<Menu attribute="brand" />
​
limit
number
default:"10"
Maximum number of items to display.
<Menu attribute="brand" limit={20} />
​
showMore
boolean
default:"false"
Whether to display a “Show more” button.
<Menu attribute="brand" showMore={true} />
​
showMoreLimit
number
default:"20"
Maximum number of items to display when “Show more” is clicked.
<Menu attribute="brand" showMore={true} showMoreLimit={50} />
​
sortBy
string[] | function
default:"['isRefined', 'name:asc']"
How to sort the items.
<Menu attribute="brand" sortBy={['count:desc', 'name:asc']} />
​
transformItems
function
Transform the menu items before displaying them.
<Menu
  attribute="brand"
  transformItems={(items) =>
    items.map((item) => ({
      ...item,
      label: item.label.toUpperCase(),
    }))
  }
/>
​
translations
object
Customize the text strings.
<Menu
  attribute="brand"
  translations={{
    showMoreButtonText: ({ isShowingMore }) =>
      isShowingMore ? 'Show less' : 'Show more',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, Menu, SearchBox, Hits } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <div className="container">
        <aside className="filters">
          <Menu attribute="brand" />
          <Menu attribute="category" />
        </aside>
        <main>
          <SearchBox />
          <Hits />
        </main>
      </div>
    </InstantSearch>
  );
}

​
With Show More

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <Menu
        attribute="brand"
        showMore={true}
        limit={10}
        showMoreLimit={50}
        sortBy={['count:desc']}
      />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us