Breadcrumb

Overview

In e-commerce, 'Breadcrumb' refers to a navigation element that allows users to see the hierarchical structure of the website and understand their location within the site. They are typically displayed as a series of links that indicate the path that a user has taken to reach the current page.

For example, if a user is on a product page for a specific item, the breadcrumb might show:
Home > Clothing > T-shirts > Men's T-shirts > [Product Name]

This way, the user can easily understand where they are within the website and navigate to other sections of the site.

Breadcrumbs are usually displayed at the top of a page, above the main content area. They can be helpful for users that have landed on a page from a search engine, external link or other website, as it allows them to understand the context of the page and navigate to other related sections.

Additionally, it can help users that are not familiar with the website structure to easily navigate, and also to return to a specific location on the website, by clicking on the breadcrumb links.

Breadcrumbs can also be used to highlight the relevance of the product or category that user is currently browsing in the website.

Usage

// importing component
import { Breadcrumb } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/breadcrumb.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/breadcrumb.css")

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { Breadcrumb, MultilevelFacet, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper webUrlConfig={{categoryFacets: ["categoryPath"]}}>
	...
	<Breadcrumb name="categoryPath" />
	<MultilevelFacet name="categoryPath" showAllParents={true} defaultOpen={false} renderAs="dropdown" />
	<Products />
	...
</UnbxdSearchWrapper>

Props

• The name of the facet of type 'multilevel'.

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
    wrapper: "breadcrumb-container", // used for the wrapper element
    breadcrumb: "breadcrumb-value", // used for each breadcrumb value
    separator: "breadcrumb-slash" // used for the breadcrumb separator
}}

Related Hook

To use the Unbxd React Search SDK without the pre-built Breadcrumb component, add the functionality to your custom component using the useBreadcrumb hook. Refer to the documentation for more details.

Related Components

Multilevel Facet