Search blocks by description or jump to a page.
A breadcrumb sitting inside a thin outlined container. Frames the navigation path cleanly on a dashboard header or any content section toolbar.
Bordered Breadcrumb renders a horizontal navigation trail where every item sits inside its own thin outlined box. Clickable ancestors (Home, Products, Categories) carry a border and gain a muted background fill on hover. Chevron icons sit between each box as separators. The active page item (Electronics in the demo) receives a primary-tinted border and background so it reads as the current location without requiring extra text labels.
Every item in the trail is independent. You can add or remove steps, rewrite the link labels and hrefs, and swap the active item to match any depth in your navigation hierarchy. The separator chevrons and the hover transitions come along automatically without extra configuration.
This layout suits interfaces where the navigation path needs to feel structured and distinct rather than plain text. In a fintech or banking product it works well at the top of account detail screens, transaction drill-downs, or settings sub-pages where a clear visual boundary helps users orient themselves inside a dense information hierarchy. The individual outlined items give more visual weight than an inline text trail, so readers immediately register each step as a tappable affordance rather than decorative copy.
A natural flow around it on a Components page:
Before
After
Each bordered item is self-contained, so you can tune the trail to fit your product:
Tip: keep the label text short (one or two words per item) so the outlined boxes stay compact and the full trail fits on mobile widths.