A breadcrumb is a small text path, often located at the top of a page indicating where the user is on the site. It allows users to keep track of and maintain awareness of their location. This breadcrumb trail immediately shows you where you are.

Where this element can be seen?

Breadcrumbs are visible on each page excluding the homepage, checkout, or page, which is the first one if the homepage link is not present in the breadcrumb trail. In some designs, breadcrumbs could be possibly removed from some pages, mobile view, etc.

How should this element be designed?

The breadcrumbs should be displayed in the following state:

• Hovered/focused state
• Disabled state
• Normal state

<aside> ℹ️ Usually, styling this element takes from-to: 2-4h

</aside>

An example display of the breadcrumbs element

How the design may look like?

<aside> 💡 Note, if you are a developer, you should implement the designs and point out if something is unclear. Below Issues with the design are issues done by the designers. Here is a link if you want to see issues done by developers during implementation

</aside>

Design Example 1

Design Example 2

Design Example 3

How to develop styles for this element?

The breadcrumbs styles are defined in the Breadcrumb and Breadcrumbs components.

scandipwa override component Breadcrumb
scandipwa override component Breadcrumbs

Possibly you will need to replace ChevronIcon which is used as an arrow between breadcrumbs with another SVG, do not change ChevronIcon because it is a global icon that is used also in dropdowns and arrows in sliders but create a new component for that icon to make it reusable across the project, however, if that arrow is the same in the designs as for dropdowns and sliders, ChevronIcon can be rewritten and used in Breadcrumbs.

<aside> ➡️ Do not use hardcoded fill, stroke, strokeWidth, etc, creating a new SVG icon component, instead add none to make it editable through styles.

</aside>

• SVG component example
• SVG component style example

Breadcrumbs are rendered in the Router component for each page that has breadcrumbs, sometimes designs require Breadcrumbs placement under the main tag, therefore custom adjustments are needed:

• Remove Breadcrumbs from the Router and render component for each route separately;
• Not render/ display none Breadcrumbs for a specific route and passing custom prop, checking by id or className ended inside main.

How the implementation may look like?

Implementation example #1