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