Breadcrumb
A trail of links showing where the user is inside the page hierarchy.
Basic
Wrap an ordered list in a <nav>. Mark the current page with aria-current="page" — it takes the full body color while the trail stays muted.
Multiple levels
Any number of crumbs work; the default chevron sits between each item.
With icon
Drop an <svg> or <i> inside a crumb. It pins to --breadcrumb-icon-size and tracks the crumb's color through hover.
String divider
Override --breadcrumb-divider on the wrapper to swap the chevron for any string. Any content value works (string, url(), counter).
Embedded SVG divider
Use a URL-encoded SVG to drop in any glyph. Bake the stroke or fill tone in hex. Browsers parse data-URL SVGs in their own context, so currentColor and CSS vars inside the SVG don't track the trail color. Pick a tone that reads in both themes, or use a Unicode glyph instead.
Customization
These variables retune .breadcrumb. Override on the element, a parent scope, or :root. Set --breadcrumb-bg + padding + radius to wrap the trail in a chip.
| Variable | Use |
|---|---|
--breadcrumb-padding-block | Vertical padding around the trail |
--breadcrumb-padding-inline | Horizontal padding around the trail |
--breadcrumb-gap | Space between crumbs and between divider and text |
--breadcrumb-font-size | Crumb text size |
--breadcrumb-bg | Background fill (with padding + radius for a chip wrap) |
--breadcrumb-radius | Outer corner radius (opt-in for chip wrap) |
--breadcrumb-color | Trail color (also paints the divider via currentColor) |
--breadcrumb-color-hover | Trail link hover color |
--breadcrumb-color-active | Current page color (aria-current="page") |
--breadcrumb-divider | Glyph between crumbs; override on the wrapper or any ancestor |
--breadcrumb-icon-size | Leading / trailing icon width and height |