About this block

Pill Breadcrumb is a horizontal navigation trail where every step in the path sits inside a rounded pill shape. Each ancestor link carries a muted background that lightens on hover, and the active page at the end of the trail flips to a filled primary pill so the current location reads immediately. Chevron separators sit between the pills to keep the directional flow clear.

The four demo items (Home, Products, Categories, Electronics) are placeholder copy you can replace with any path depth that fits your site. The pill shape and the filled active state are built into the structure, so you can add or remove intermediate steps without adjusting anything else.

When to use

Reach for this block when you want a breadcrumb that feels tappable and friendly rather than purely utilitarian. It suits dashboards, product category pages, and account screens where the interface already uses rounded shapes throughout. On a logistics and delivery platform it works well above a shipment detail view, letting drivers or dispatchers step back to a route, a depot, or a region without hunting for a back button.

A natural flow around it on a Components page:

Before

• Tabs to switch between views at the same level before the breadcrumb anchors the deeper location
• A page header or filter bar to frame the section the breadcrumb belongs to

After

• Cards to display the content of the active page the breadcrumb has landed on
• Pagination when the category view below spans multiple pages

What you can customize

Each part of the trail is an independent item, so you can reshape the breadcrumb to match almost any navigation depth:

• Link labels and hrefs. Swap the demo copy for your real category or section names and point each href at the correct route.
• Number of steps. Add intermediate items for deeper hierarchies or remove them for shallower ones; the separator chevrons adjust automatically.
• Active pill styling. The final item uses your primary color by default, making it easy to align with a brand accent or a status color.

Tip: keep the trail to four steps or fewer so the pills fit on a single line at mobile widths without wrapping awkwardly.