Как сделать хлебные крошки

Короткий ответ

Нумерованный список внутри nav, разделители рисует CSS:

<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>

Почему так

nav с aria-label экранный диктор объявляет как отдельную навигацию, а ol сообщает, что пунктов три и порядок важен. aria-current="page" отмечает текущую страницу — её не делают ссылкой.

Разделители

Селектор li + li выбирает все пункты, кроме первого, поэтому разделитель стоит только между ними. Вместо косой черты можно поставить "›" или "→". Разделитель в content экранные дикторы обычно не читают — так и нужно.

Частая ошибка

Разделители пишут прямо в HTML: Home / Shoes / Running shoes. Тогда диктор прочитает «косая черта» между пунктами, а при переносе строки черта может оказаться в начале новой строки. Рисуйте разделители через ::before.