Breadcrumb

A navigation trail built from a semantic nav element and ordered list. The current page is marked with aria-current="page".

Demo on CodePen

Preview

Implementation Notes

Breadcrumbs should stay as navigation and list markup. The separators are decorative, so they are inserted through CSS rather than repeated in the HTML.

Browser Compatibility

Feature Chrome Edge Firefox Safari Notes Source
aria-current Broad support Yes Yes Yes Yes Uses semantic navigation markup and a standard ARIA state. caniuse

Breadcrumbs rely on semantic HTML and standard CSS only.