Numbered Breadcrumb
A breadcrumb that numbers each step in the path. Clarifies order for sequential flows such as checkout, onboarding, or a multi step setup wizard.
A breadcrumb that numbers each step in the path. Clarifies order for sequential flows such as checkout, onboarding, or a multi step setup wizard.
Search blocks by description or jump to a page.
Numbered Breadcrumb is a linear navigation trail where every step carries a small circular badge containing its position number. The block renders a flat horizontal list of four items, each pairing a filled round badge with a label, separated by chevron icons pointing right. The first three items are active links; the current page item uses a filled primary badge to mark where the user is now at a glance.
Each item is independent, so you can change the label text, update the href, or add and remove steps without affecting the others. The badge colours follow your theme tokens, so the active step always contrasts against the preceding ones without any manual overrides.
Reach for this block when the path through your product has a clear sequence and users benefit from seeing which step they are on. It suits multi-step setup flows in an AI assistant product, such as connecting a data source, configuring a workspace, choosing a plan, and confirming settings. The numbered badges do more work than plain text links alone because they communicate both location and order in one glance, which plain breadcrumbs or dot separators cannot.
A natural flow around it on a Components page:
Before
After
The block is a small, self-contained trail with three moving parts:
Tip: keep step labels to one or two words so the badges and labels stay on a single line across small viewports.