Хлебные крошки: путь от раздела к статье
Строим понятную цепочку навигации, которая отражает структуру сайта, а не историю переходов.
Задача и ограничения
Хлебные крошки показывают место текущей страницы в иерархии. Они не обязаны повторять путь, по которому пришёл конкретный посетитель. Для справочника достаточно цепочки «Главная → Раздел → Материал».
Пошаговое решение
Поместите цепочку в nav с отдельным именем. Используйте упорядоченный список. Промежуточные уровни сделайте обычными ссылками, а текущую страницу можно оставить текстом с aria-current=»page».
Разделители должны быть декоративными и не мешать чтению. В примере это отдельные span с aria-hidden. На узком экране разрешите перенос всей цепочки и длинного названия материала. Структурированная разметка, если добавлена отдельно, должна соответствовать видимому пути.
Код компонента
<style>
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; font-size: 14px; }
.breadcrumbs li { overflow-wrap: anywhere; }
</style>
<nav aria-label="Хлебные крошки"><ol class="breadcrumbs"><li><a href="#home">Главная</a></li><li aria-hidden="true">/</li><li><a href="#html">HTML</a></li><li aria-hidden="true">/</li><li aria-current="page">Ссылки</li></ol></nav>
<p id="home">Обзор проекта</p><p id="html">Справочник HTML</p>Что может пойти не так
Как проверить результат
- Откройте каждую промежуточную ссылку.
- Проверьте текущую страницу без ссылки.
- Увеличьте последнее название и проверьте переносы.
Разберите также: nav, перенос элементов.