Ecommerce Breadcrumbs
Breadcrumb patterns for shop and product interfaces — category paths, chip tags, item counts, image thumbnails, inline price and rating, checkout steppers, progress indicators, mobile back links, and dropdown path pickers.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for boutique/luxury shops, light for clean minimal storefronts. |
| accentColor | string | "#6366f1" | Applied to active chip fill, checkout stepper current step, progress bar fill, and step number circle. |
| currency | string | "$" | Currency symbol shown before prices in PriceCrumb — e.g. '€', '£', '₹'. |
| checkoutStep | number | 2 | Active step in CheckoutStepper, ProgressCrumb, and StepNumberCrumb (1=Cart, 2=Shipping, 3=Payment, 4=Review). Steps before this are marked done. |
When to Use
Use on product pages, category listing pages, and checkout flows. MobileCrumb covers the dominant mobile pattern. CheckoutStepper and ProgressCrumb work as ordered-flow indicators.
Best Practices
On product pages, keep breadcrumbs above the fold and below the header. On mobile, collapse to MobileCrumb (back link only). In checkout, always show completed steps as clickable to allow going back.
Why This Component Matters
Ecommerce breadcrumbs serve a dual role — navigation and conversion. Clear category paths reduce bounce rate, and step indicators in checkout reduce abandonment by making progress visible.
FAQ
QHow does CheckoutStepper mark completed steps?
Each step has a state: 'upcoming' | 'current' | 'done'. Done steps show an animated emerald check circle. Click any done step to go back.
QCan ImageCrumb use real product images?
Yes — replace the colored placeholder squares with <img> tags pointed at your product thumbnail URLs.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.