Breadcrumbs
Breadcrumbs are a single-line trail of links from a root page down to the one being read, separated by a repeated glyph, showing where the current page sits in a hierarchy and giving one click back to every level above it. The last item is where you already are, so it is not a link. The trail describes structure, not the route somebody took to arrive: two different things that get confused because both look like a line of page names.
The separator is chosen once for a product and never changes at runtime, which is why this family ships seven of them rather than one: a slash reads as a path, a chevron as travel, a pair of stacked dots as nesting with no direction at all. Length is the other half of the problem. Past a certain depth a trail has to fold, and it folds in the middle, the root and the current page carry the meaning, and the steps between them are what you can afford to put behind an ellipsis.
Chevron
Best for
The default trail: docs, file browsers, nested settings
Anatomy
Flat chevron in a 20px slot · the same glyph the current crumb's dropdown uses, rotated · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Right arrow head
Best for
Denser chrome, where the separator should sit closer to the crumb behind it
Anatomy
Stroked right arrow (shaft and head) in a 16px slot, carried 4px right of centre · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Forward slash
Best for
Paths and URLs, where the trail is a literal address
Anatomy
A typed slash in Inter 14/20 · a 20px slot · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Dot
Best for
Quiet trails that sit under a page title and should not compete with it
Anatomy
A single bullet in Inter 14/20 · a 20px slot · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Double dot
Best for
Trails that need a mark with no direction: a hierarchy read by nesting, not by travel
Anatomy
Two stacked bullets in an 8px slot, the narrowest separator in the set · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Arrow head
Best for
The same arrow with even spacing on both sides
Anatomy
Stroked arrow head centred in a 20px slot · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
More vertical
Best for
Toolbars where the separator should read as a rule rather than a glyph
Anatomy
Three stacked dots in a 20px slot · the set's only vertical mark · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Using Breadcrumbs
Reach for it when
- Content sits more than two levels deep and people arrive mid-tree from search
- A file or asset browser where each parent is a real place you can open
- Settings panels nested under sections, where the page heading alone does not say which section owns them
- You need a way back up that costs one line instead of a sidebar
Reach for something else when
- A flat site with one level of sections: the trail only repeats the nav, so let the nav's own active state do it
- A linear process like a checkout or an application: a step indicator shows progress and what remains, which ancestry cannot
- The trail would be the only navigation on the page: breadcrumbs supplement a nav rather than replace one
Where it shows up
Documentation hierarchies
Docs are entered mostly from search, deep in a tree the reader never walked. The trail says which section they landed in and offers the parent page, which is often the overview they were actually looking for.
File and asset browsers
Folders are places, so the trail doubles as navigation: every crumb is a real listing, and the current folder's own control can offer its siblings without making anyone climb back up a level first.
Nested settings
Configuration pages bury a panel two or three levels under a section. A heading says what the panel is. Only the trail says which section owns it, and what else lives beside it at the same depth.
Category catalogues
A product page sits under a chain of categories that each list something real. The trail turns those into one-click listings, and it is also how a crawler learns the shape of the catalogue behind the page.
Questions
Should the current page be a link in a breadcrumb trail?
No. The last crumb is the page you are already on, so it should not be a link; mark it as the current item so assistive technology announces it that way. It can still carry an affordance of its own, such as a control listing sibling pages, but clicking the label itself ought to do nothing at all.
What should breadcrumbs do when the path is too long for one line?
Fold the middle, never the ends. The root and the current page carry the most meaning, so keep both and replace the steps between them with an ellipsis that expands the full trail when clicked. Wrapping onto a second line also works, though it costs vertical space at exactly the width where space is scarcest. Do not let the trail scroll sideways off screen.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPBreadcrumbs
Breadcrumbs are a single-line trail of links from a root page down to the one being read, separated by a repeated glyph, showing where the current page sits in a hierarchy and giving one click back to every level above it. The last item is where you already are, so it is not a link. The trail describes structure, not the route somebody took to arrive: two different things that get confused because both look like a line of page names.
The separator is chosen once for a product and never changes at runtime, which is why this family ships seven of them rather than one: a slash reads as a path, a chevron as travel, a pair of stacked dots as nesting with no direction at all. Length is the other half of the problem. Past a certain depth a trail has to fold, and it folds in the middle, the root and the current page carry the meaning, and the steps between them are what you can afford to put behind an ellipsis.
Chevron
Best for
The default trail: docs, file browsers, nested settings
Anatomy
Flat chevron in a 20px slot · the same glyph the current crumb's dropdown uses, rotated · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Right arrow head
Best for
Denser chrome, where the separator should sit closer to the crumb behind it
Anatomy
Stroked right arrow (shaft and head) in a 16px slot, carried 4px right of centre · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Forward slash
Best for
Paths and URLs, where the trail is a literal address
Anatomy
A typed slash in Inter 14/20 · a 20px slot · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Dot
Best for
Quiet trails that sit under a page title and should not compete with it
Anatomy
A single bullet in Inter 14/20 · a 20px slot · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Double dot
Best for
Trails that need a mark with no direction: a hierarchy read by nesting, not by travel
Anatomy
Two stacked bullets in an 8px slot, the narrowest separator in the set · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Arrow head
Best for
The same arrow with even spacing on both sides
Anatomy
Stroked arrow head centred in a 20px slot · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
More vertical
Best for
Toolbars where the separator should read as a rule rather than a glyph
Anatomy
Three stacked dots in a 20px slot · the set's only vertical mark · home-anchored trail · a collapsing ellipsis past five items · a current-page dropdown
Using Breadcrumbs
Reach for it when
- Content sits more than two levels deep and people arrive mid-tree from search
- A file or asset browser where each parent is a real place you can open
- Settings panels nested under sections, where the page heading alone does not say which section owns them
- You need a way back up that costs one line instead of a sidebar
Reach for something else when
- A flat site with one level of sections: the trail only repeats the nav, so let the nav's own active state do it
- A linear process like a checkout or an application: a step indicator shows progress and what remains, which ancestry cannot
- The trail would be the only navigation on the page: breadcrumbs supplement a nav rather than replace one
Where it shows up
Documentation hierarchies
Docs are entered mostly from search, deep in a tree the reader never walked. The trail says which section they landed in and offers the parent page, which is often the overview they were actually looking for.
File and asset browsers
Folders are places, so the trail doubles as navigation: every crumb is a real listing, and the current folder's own control can offer its siblings without making anyone climb back up a level first.
Nested settings
Configuration pages bury a panel two or three levels under a section. A heading says what the panel is. Only the trail says which section owns it, and what else lives beside it at the same depth.
Category catalogues
A product page sits under a chain of categories that each list something real. The trail turns those into one-click listings, and it is also how a crawler learns the shape of the catalogue behind the page.
Questions
Should the current page be a link in a breadcrumb trail?
No. The last crumb is the page you are already on, so it should not be a link; mark it as the current item so assistive technology announces it that way. It can still carry an affordance of its own, such as a control listing sibling pages, but clicking the label itself ought to do nothing at all.
What should breadcrumbs do when the path is too long for one line?
Fold the middle, never the ends. The root and the current page carry the most meaning, so keep both and replace the steps between them with an ellipsis that expands the full trail when clicked. Wrapping onto a second line also works, though it costs vertical space at exactly the width where space is scarcest. Do not let the trail scroll sideways off screen.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
