Search blocks by description or jump to a page.
A breadcrumb trail wrapped in a soft tinted background bar. Anchors the top of a page and keeps navigation links readable above busy content.
Background Breadcrumb wraps the entire navigation trail inside a single tinted pill bar. The bar holds a row of links separated by chevron icons, and the current page sits at the far right rendered as plain text with a lighter background chip to distinguish it from the clickable ancestors. Each ancestor link gets its own hover highlight so the target area is clear without needing underlines.
All the pieces are independent. You can swap in however many path segments your hierarchy needs, rewrite every label, and change the icons in the separators without affecting the container or the current page chip. The bar itself is a single wrapper, so removing it entirely leaves a plain breadcrumb you can restyle from scratch.
This layout works well when the breadcrumb sits above content that is visually busy or has a light background where a bare text trail would disappear. For a developer tools company, it fits naturally on a docs page that renders code blocks and dense reference tables: the tinted bar draws a clear horizontal seam between the navigation layer and the content below. It handles three to five path segments comfortably before the bar starts to feel crowded.
A natural flow around it on a Components page:
Before
After
The block gives you a contained breadcrumb bar with three distinct interactive zones. A few ways to adapt it:
Tip: keep the bar to four segments or fewer so it never wraps onto a second line in narrow viewports.