Widgets Menu

Description

The Menu component displays a menu that lets the user choose a single value for a specific attribute.

Requirements

The attribute passed to the attribute prop must be present in “attributes for faceting” on the Algolia dashboard or configured as attributesForFaceting via a set settings call to the Algolia API.

If you are using the searchable prop, you’ll also need to make the attribute searchable using the dashboard or using the API.

Props

attribute*
type: string 

the name of the attribute in the record

showMore
type: booleandefault: false

true if the component should display a button that will expand the number of items

limit
type: numberdefault: 10

the minimum number of diplayed items

showMoreLimit
type: numberdefault: 20

the maximun number of displayed items. Only used when showMore is set to true

defaultRefinement
type: string 

the value of the item selected by default

transformItems
type: function 

Function to modify the items being displayed, e.g. for filtering or sorting them. Takes an items as parameter and expects it back in return.

searchable
type: booleandefault: false

true if the component should display an input to search for facet values.
In order to make this feature work, you need to make the attribute searchable using the API or the dashboard.

Example usage

import React from 'react'; import { InstantSearch, Menu } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <Menu attribute="categories" /> </InstantSearch> );

CSS classes

.ais-Menu {}

the root div of the widget

.ais-Menu-searchBox {}

the search box of the widget. See the SearchBox documentation for the classnames and translation keys of the SearchBox.

.ais-Menu-list {}

the list of all menu items

.ais-Menu-item {}

the menu list item

.ais-Menu-item--selected {}

the selected menu list item

.ais-Menu-link {}

the clickable menu element

.ais-Menu-label {}

the label of each item

.ais-Menu-count {}

the count of values for each item

.ais-Menu-noResults {}

the div displayed when there are no results

.ais-Menu-showMore {}

the button used to display more categories

.ais-Menu-showMore--disabled {}

the disabled button used to display more categories

Translation keys

showMore

The label of the show more button. Accepts one parameters, a boolean that is true if the values are expanded

noResults

The label of the no results text when no search for facet values results are found.