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);
search.addWidget(customBreadcrumb);
(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.
Array<BreadcrumbItem>
Values to be rendered.
(item.value) => undefined
Sets the path of the hierarchical filter and triggers a new search.
Object
All original CustomBreadcrumbWidgetOptions
forwarded to the renderFn
.
Array<string>
Attributes to use to generate the hierarchy of the breadcrumb.
[string]
null
Prefix path to use if the first level is not the root level.
[(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.