Breadcrumbs

Breadcrumbs show the path from the homepage to the current page — built with nav around an ordered list of links.

Code

<nav aria-label="Breadcrumb">
  <ol style="display:flex;gap:0.5rem;list-style:none;padding:0;margin:0">
    <li><a href="/">Home</a></li>
    <li>/</li>
    <li><a href="/blog">Blog</a></li>
    <li>/</li>
    <li aria-current="page">Article</li>
  </ol>
</nav>

Preview

Explanation

The last item (the current page) is not a link and gets aria-current="page" instead of href. ol is used because the order of steps matters.

The "/" separator can be replaced with a CSS ::after instead of a separate <li>, so it isn't confused with real path items by screen readers.

Related tools

Accessible navigation menu

A semantic navigation menu with aria-label and correct use of nav/ul/a.