About this block

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.

When to use

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

• A short page header or card that names the current task, so the breadcrumb has context to anchor to.
• Progress Breadcrumb if you want the fill bar variant instead of discrete numbered steps.

After

• A tabs block to divide the content of the current step into sub-sections.
• Pagination if the current step contains a long list the user needs to page through.

What you can customize

The block is a small, self-contained trail with three moving parts:

• Step labels. Each link label is plain text, so you can rename steps to match any flow without touching layout or styling.
• Active step position. Move the primary-coloured badge to whichever item represents the current page to reflect the user's real position in the sequence.
• Step count. Add or remove breadcrumb items and their separators to match flows shorter or longer than four steps.

Tip: keep step labels to one or two words so the badges and labels stay on a single line across small viewports.