Add Breadcrumb Navigation to Product Pages

[marjan-ahmed]

Description

Currently, the product pages in the Saleor Storefront lack breadcrumb navigation, which is a common UX pattern in e-commerce websites. Adding a breadcrumb will help users understand the product hierarchy and easily navigate back to categories or home.

Proposed Solution

• Add a Breadcrumb component above the product title on the product detail page.
• Structure:
  • Home → Category → Product Name
  • If category information is not available, display only Home → Product Name.
• The breadcrumb should be dynamic based on the channel, product category, and product name.
• Styling should follow the existing theme of the storefront with hover effects on links and clear separators (/).

Example

<Breadcrumb
  channel={channel}
  categoryName={product.category?.name}
  categorySlug={product.category?.slug}
  productName={product.name}
/>

[peelar]

rel: #1141

[supriyokanrar626-sketch]

Hi @marjan-ahmed,

I'm interested in working on this issue.
I have experience with React and would love to add breadcrumb navigation
to the product pages. Could you please assign this to me?

I'll create a Breadcrumb component and integrate it into the product detail page.

Thanks!

[marjan-ahmed]

@supriyokanrar626-sketch thanks for reaching out to this issue. But unfortunately, the maintainer has closed this PR #1141