Compact Breadcrumb
A tight breadcrumb with reduced spacing between its links. Fits crowded toolbars and mobile headers where horizontal room is in short supply.
A tight breadcrumb with reduced spacing between its links. Fits crowded toolbars and mobile headers where horizontal room is in short supply.
Search blocks by description or jump to a page.
Compact Breadcrumb is a tight horizontal navigation trail. A single row holds four linked items separated by small chevron icons: Home, Products, Categories, and the current page label. The text is set one size smaller than body copy and the gaps between items are deliberately narrow, so the whole trail takes up very little horizontal space.
Every part of the trail is independent. You can add or remove links, swap the page labels for anything that fits your information architecture, and drop the block into any toolbar or page header without adjusting surrounding layout. The current page item renders as plain text so it is visually distinct from the clickable ancestors without any extra markup.
Reach for this block when horizontal room is limited and a full-size breadcrumb would feel heavy. It suits the top of a course detail page on an online education platform, where learners are already inside a subject area, a module, and a specific lesson and need a quick way back. It also works well inside dashboards or content management interfaces where the breadcrumb shares a toolbar row with buttons or filters.
Compared to the pill or card siblings, this layout adds almost no visual weight, which makes it the right choice when the breadcrumb should inform without drawing attention.
A natural flow around it on a Components page:
Before
After
All four trail items are plain text and links, so swapping them is the main way to tailor the block:
Tip: keep the trail to four items or fewer so it stays readable on narrow mobile viewports without needing truncation logic.