Timeline Breadcrumb
A breadcrumb laid out as a connected timeline of steps. Maps a journey through stages, ideal for order tracking and live project status views.
A breadcrumb laid out as a connected timeline of steps. Maps a journey through stages, ideal for order tracking and live project status views.
Search blocks by description or jump to a page.
Timeline Breadcrumb stacks the navigation path vertically. A thin vertical rail runs the full height of the list, and each step sits beside a circular node on that rail. The first three nodes show a filled inner circle against a muted ring, and the active step at the bottom shifts its ring to the primary color so the current position reads immediately. Each node connects to a link label that highlights on hover.
The number of steps, the label text, and the destination URLs are all independent. You can add or remove items freely, and the rail adjusts to whatever height the list reaches. The active marker belongs to the last item by convention but can be moved to any position to match where the user actually is in the flow.
Reach for this block when a page needs to show where a user stands inside a multi-stage journey, not just where they came from. It is a natural fit for an ecommerce order detail page, a shipment tracking view, or a product category drill-down where each level of the catalog hierarchy deserves its own named step. The vertical orientation gives each stage room to breathe and works better than a horizontal trail when the path has four or more levels or when labels are longer than a single word.
A natural flow around it on a Components page:
Before
After
The block suits any flow where each step in a path is a named, linked destination. A few concrete ways to use it:
Tip: keep labels short, one or two words each, so the rail stays narrow and the vertical rhythm stays consistent down the page.