connectors connectBreadcrumb

Edit this page


Breadcrumb connector provides the logic to build a custom widget that will give the user the ability to see the current path in a hierarchical facet.

This is commonly used in websites that have a large amount of content organized in a hierarchical manner (usually e-commerce websites).


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

const makeBreadcrumb= instantsearch.connectors.connectBreadcrumb(
function renderFn(
renderOpts: BreadcrumbRenderingOptions,
isFirstRendering: boolean) {
// render the custom Breadcrumb widget
} );

const customBreadcrumb = makeBreadcrumb(instanceOpts: CustomBreadcrumbWidgetOptions);

Connector options


  • createURL(item.value) => string

    Creates an url for the next state for a clicked item. The special value null is used for the Home (or root) item of the breadcrumb and will return an empty array.

  • itemsArray<BreadcrumbItem>

    Values to be rendered.

  • refine(item.value) => undefined

    Sets the path of the hierarchical filter and triggers a new search.

  • widgetParamsObject

    All original CustomBreadcrumbWidgetOptions forwarded to the renderFn.


  • namestring

    Name of the category or subcategory.

  • valuestring

    Value of breadcrumb item.


  • attributesArray<string>

    Attributes to use to generate the hierarchy of the breadcrumb.

  • rootPath[string]
    Default value: null

    Prefix path to use if the first level is not the root level.

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

    Function to transform the items passed to the templates.

    You can also use a sort function that behaves like the standard Javascript compareFunction.

Can't find what you are looking for? Open an issue, we'll get back to you.