Search blocks by description or jump to a page.
A breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.
Progress Breadcrumb is a four step checkout trail. Each step pairs a small filled circle with a label, and the circles change state as the user moves forward. Completed steps show a check icon inside a solid circle and their label turns accented. The active step shows the step number inside a solid circle with medium weight text. Future steps show the number inside a muted circle with subdued text. A short horizontal rule sits between every pair of steps as a connector.
The step list, the current position, and every label are straightforward to change. You can expand or shorten the number of steps to match your actual flow, swap the placeholder labels for your own copy, and set the active step index wherever your routing logic lands the user.
Reach for this block when a multi step process needs a persistent location marker at the top of each screen. It fits a real estate marketplace well, where a buyer moves through steps like Search, Shortlist, Schedule, and Offer and needs a clear read of how far along they are at any point. It outperforms a plain numbered breadcrumb here because the filled check on completed steps signals genuine progress rather than just position, reducing drop off on long funnels.
A natural flow around it on a Components page:
Before
After
All three visual states are driven by a single current step value, so adapting the block to a new flow is a matter of updating a few pieces:
Tip: keep step labels to one or two short words so the full trail fits on a single line across mobile widths without wrapping awkwardly.