Элементы

Хлебные крошки

Путь до текущей страницы; длинный путь сворачивается: середина прячется за кнопкой «…».

Примеры

<nav class="breadcrumb" aria-label="Путь по сайту">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">Блог</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="/tags/">Рубрики</a></li>
    <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">Эксплуатация</span></li>
  </ol>
</nav>

<nav class="breadcrumb" aria-label="Путь по сайту" data-ui-collapse="4">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">Кабинет</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="/rooms/">Комнаты</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="/rooms/team/">Команда</a></li>
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="/rooms/team/recordings/">Записи</a></li>
    <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">Планёрка 12/10/2026</span></li>
  </ol>
</nav>

Установка

bukatchuk-ui add breadcrumb

Файлы

Варианты

Переменные

Клавиши

Вставка для Jekyll

{%- comment -%}
  Хлебные крошки. Параметры: items — список объектов (text, href), например page.crumbs;
  последний пункт — текущая страница. collapse — число пунктов, с которого середина сворачивается (по умолчанию 4);
  light=true — на тёмном фоне.
{%- endcomment -%}
<nav class="breadcrumb{% if include.light %} breadcrumb--light{% endif %}" aria-label="Путь по сайту" data-ui-collapse="{{ include.collapse | default: 4 }}">
  <ol class="breadcrumb__list">
    {%- for item in include.items %}
    {%- if forloop.last %}
    <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">{{ item.text }}</span></li>
    {%- else %}
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="{{ item.href | relative_url }}">{{ item.text }}</a></li>
    {%- endif %}
    {%- endfor %}
  </ol>
</nav>

Макрос для Jinja

{#- Хлебные крошки. items — список (text, href); последний пункт — текущая страница, ссылка у него не нужна.
    collapse — число пунктов, начиная с которого середина сворачивается (по умолчанию 4); light — на тёмном фоне. -#}
{% macro breadcrumb(items, collapse=4, light=False, label='Путь по сайту') -%}
<nav class="breadcrumb{% if light %} breadcrumb--light{% endif %}" aria-label="{{ label }}" data-ui-collapse="{{ collapse }}">
  <ol class="breadcrumb__list">
    {%- for item in items %}
    {%- if loop.last %}
    <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">{{ item.text }}</span></li>
    {%- else %}
    <li class="breadcrumb__item"><a class="breadcrumb__link" href="{{ item.href }}">{{ item.text }}</a></li>
    {%- endif %}
    {%- endfor %}
  </ol>
</nav>
{%- endmacro %}