Magento

React package to create Magento storefronts.

Breadcrumbs Component

The Breadcrumbs component supports filtering and customization options:

Basic Usage

import { Breadcrumbs } from '@wpro/magento'

;<Breadcrumbs pageTitle="Product Name" />

Advanced Usage with Filtering

import { Breadcrumbs } from '@wpro/magento'

// Exclude specific items by name, route, or pattern
;<Breadcrumbs
  pageTitle="Product Name"
  excludeItems={[
    { name: 'Category Name' }, // Exclude by exact name
    { route: '/category/path' }, // Exclude by exact route
    { pattern: '.*sale.*' }, // Exclude by regex pattern
  ]}
  removeLast={true} // Remove the last breadcrumb item
/>

Filtering Options

• excludeItems: Array of criteria to exclude breadcrumb items

  • name: Exact name match
  • route: Exact route match
  • pattern: Regex pattern to match against name or route

• removeLast: Boolean to remove the last breadcrumb item (useful when you want to show the current page title separately)

Other Props

• pageTitle: Custom page title for the current page
• homePageName: Custom name for the home page (default: "Home")
• disableHome: Hide the home breadcrumb
• hasSkuBreadcrumb: Use SKU instead of product name for product pages