Card Breadcrumb
A breadcrumb housed in a rounded card with a subtle shadow. Lifts the navigation path off the page for detail views and account settings screens.
A breadcrumb housed in a rounded card with a subtle shadow. Lifts the navigation path off the page for detail views and account settings screens.
Search blocks by description or jump to a page.
Card Breadcrumb wraps a standard navigation trail inside a rounded card container with a border and a soft shadow. The card holds a horizontal row of links separated by chevron icons, reading from a root anchor through intermediate stops to a bold current page label at the end. The card sits on padding so it floats clear of whatever is behind it.
Every piece of the block is independently editable. You can change the link labels and targets to match any hierarchy, add or remove intermediate stops, or swap the current page label for a different section name. The card container itself can be dropped anywhere a breadcrumb makes sense without adjusting surrounding layout.
Reach for this block when the breadcrumb needs to stand out rather than blend into the page. In a healthcare scheduling product, detail screens for appointments, patient records, or billing summaries often sit inside flat white surfaces, and the card lifts the navigation path just enough to read as its own element. It works equally well in account settings drawers or any content area where the background behind the header is light and uniform, and a flat breadcrumb would disappear into it.
A natural flow around it on a Components page:
Before
After
The block adapts to any depth of navigation hierarchy you already have:
Tip: keep the trail to four stops or fewer so the card stays compact and the labels remain legible at narrow viewport widths.