Widgets Breadcrumb


A breadcrumb is a secondary navigation scheme that allows the user to see where the current page is in relation to the website or web application’s hierarchy. In terms of usability, using a breadcrumb reduces the number of actions a visitor needs to take in order to get to a higher-level page.

If you want to select a specific refinement for your Breadcrumb component, you will need to use a Virtual Hierarchical Menu and set its defaultRefinement that will be then used by the Breadcrumb.


Breadcrumbs are used for websites with a large amount of content organised in a hierarchical manner. The typical example is an e-commerce website which has a large variety of products grouped into logical categories (with categories, subcategories which also have subcategories).To use this widget, your attributes must be formatted in a specific way.

Keep in mind that breadcrumbs shouldn’t replace effective primary navigation menus: it is only an alternative way to navigate around the website.

If, for instance, you would like to have a breadcrumb of categories, objects in your index should be formatted this way:

{ "categories.lvl0": "products", "categories.lvl1": "products > fruits", "categories.lvl2": "products > fruits > citrus" }

It’s also possible to provide more than one path for each level:

{ "categories.lvl0": ["products", "goods"], "categories.lvl1": ["products > fruits", "goods > to eat"] }

All attributes passed to the attributes 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.


type: array.<string> 

List of attributes to use to generate the hierarchy of the menu. See the example for the convention to follow

type: nodedefault: '>'

Symbol used for separating hyperlinks

type: stringdefault: null

The originating page (homepage)

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

Example usage

import React from 'react'; import { Breadcrumb, InstantSearch, HierarchicalMenu } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <Breadcrumb attributes={[ 'hierarchicalCategories.lvl0', 'hierarchicalCategories.lvl1', 'hierarchicalCategories.lvl2', ]} /> <HierarchicalMenu defaultRefinement="Cameras & Camcorders" attributes={[ 'hierarchicalCategories.lvl0', 'hierarchicalCategories.lvl1', 'hierarchicalCategories.lvl2', ]} /> </InstantSearch> );

CSS classes

.ais-Breadcrumb {}

the root div of the widget

.ais-Breadcrumb--noRefinement {}

the root div of the widget when there is no refinement

.ais-Breadcrumb-list {}

the list of all breadcrumb items

.ais-Breadcrumb-item {}

the breadcrumb navigation item

.ais-Breadcrumb-item--selected {}

the selected breadcrumb item

.ais-Breadcrumb-separator {}

the separator of each breadcrumb item

.ais-Breadcrumb-link {}

the clickable breadcrumb element

Translation keys


The root’s label. Accepts a string