Search blocks by description or jump to a page.
A breadcrumb pairing each link with a leading icon. Helps users scan the path at a glance across sections like home, docs, billing, and settings.
Icon Breadcrumb is a horizontal navigation trail where every step pairs a small inline icon with its label. The trail opens with a Home link carrying a house icon, then moves through Products and Categories, and lands on the current page (Electronics) rendered as plain non-linked text. Chevron arrows sit between each step as separators, giving the path a clear left-to-right reading order.
Each breadcrumb item is independent. You can swap any label and its paired icon, add or remove intermediate steps, and update the href values without affecting the other items. The current page item has no href and carries a slightly heavier font weight to mark it as the terminal node.
Reach for this block when your navigation path spans sections that are meaningfully distinct in kind, not just in depth. In a project management workspace it works well above views that move through spaces like Workspace, Projects, Boards, and the current task, where a recognizable icon beside each level helps teammates orient themselves faster than text alone. It is a better choice than a plain text breadcrumb when the sections carry strong visual identities, and more appropriate than a numbered or progress breadcrumb when the path is not a linear sequential flow.
A natural flow around it on a Components page:
Before
After
Each item in the trail is fully replaceable with content that fits your section structure:
Tip: keep icons simple and universally recognizable. A single stroke outline icon reads more clearly at small sizes than a filled or detailed one.