How to make breadcrumbs

Short answer

An ordered list inside nav, with CSS drawing the separators:

<style>
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
  .crumbs li + li::before { content: "/"; margin-right: 6px; color: silver; }
  .crumbs a { color: royalblue; text-decoration: none; }
  .crumbs [aria-current] { color: dimgray; }
</style>
 
<nav class="crumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com">Home</a></li>
    <li><a href="https://example.com">Shoes</a></li>
    <li><span aria-current="page">Running shoes</span></li>
  </ol>
</nav>

Why this markup

A screen reader announces nav with aria-label as a separate navigation, and ol tells it there are three items in a meaningful order. aria-current="page" marks the current page — it is not made a link.

Separators

The li + li selector picks every item except the first, so the separator only goes between them. Instead of a slash you can use "›" or "→". Screen readers usually skip a separator in content — which is exactly what you want.

Common mistake

People type the separators right into the HTML: Home / Shoes / Running shoes. Then a screen reader reads out "slash" between items, and on a line break the slash can end up at the start of a new line. Draw separators with ::before.