← All elements
<nav aria-label="Breadcrumb"><ol class="bc"><li><a href="#">Home</a></li><li><a href="#">Elements</a></li><li><a href="#">Buttons</a></li><li aria-current="page">Glow</li></ol></nav>About this navigation bar
A breadcrumb navigation whose separators are drawn with ::before content, leaving the markup a clean ordered list.
How it works
The trail is an ordered list inside a nav landmark, which is the correct structure for breadcrumbs. The separators are not in the markup: li + li::before adds a single arrow character before every item except the first. The last item carries aria-current so it is styled as the current page rather than a link.
Ways to customise it
- Change the content of ::before to use a slash or a chevron.
- Edit the pill background and shadow on the list.
- Remove border-radius on the list for a square bar.
Good to know
Keeping separators in CSS means screen readers do not read out arrows. Use real links for each step and let the last one be plain text. The pattern works in every browser.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.