Pill Breadcrumb
A breadcrumb where each link sits inside a rounded pill shape. Adds a friendly, tappable feel to navigation on dashboards and profile pages.
A breadcrumb where each link sits inside a rounded pill shape. Adds a friendly, tappable feel to navigation on dashboards and profile pages.
Search blocks by description or jump to a page.
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.
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
After
Each part of the trail is an independent item, so you can reshape the breadcrumb to match almost any navigation depth:
Tip: keep the trail to four steps or fewer so the pills fit on a single line at mobile widths without wrapping awkwardly.