connectors connectBreadcrumb

Description

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).

Usage

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);
search.addWidget(customBreadcrumb);

Connector options

BreadcrumbRenderingOptions

• 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.

BreadcrumbItem

• labelstring

  Label of the category or subcategory.

• valuestring

  Value of breadcrumb item.

CustomBreadcrumbWidgetOptions

• 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.