---
description: Список ссылок, представляющих текущее положение в иерархии сайта.
---

# Хлебные крошки (Breadcrumbs)

![](https://72564723-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXg0KhIlZk_bjQRk4u3%2F-Ma2yBiQb_pXCFQgpgeY%2F-MaXdt6L-hQDL3UTh0dF%2Fbreadcrumbs.png?alt=media\&token=1601626d-45b4-40cc-97b3-41ad058b6f43)

## Основные данные&#x20;

Основной ресурс откуда взята информация - [https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs](https://ebay.gitbook.io/mindpatterns/navigation/breadcrumbs)

Хлебные крошки - это ориентир навигации, который позволяет пользователю определить свое текущее положение в иерархии сайта и предоставляет средства для перехода вверх по этой иерархии.

## Терминология

* **breadcrumbs** это цельный паттерн, состоящий из суб частей&#x20;
* **breadcrumb item**: это ссылка
* **separator**: графический символ, который разделяет каждый breadcrumb

## Лучшая практика

Обычно используются в качестве вторичной навигации на сайтах, организованных в иерархическом порядке.

В качестве разделителя используется символ (иконка) SVG.

Последняя ссылка на хлебные крошки, представляющая текущее место в иерархии, не интерактивна.

Хлебные крошки **должны** иметь заголовок «Вы здесь» или соответствующие слова. Этот заголовок можно визуально скрыть за кадром.

Если путь хлебных крошек достаточно длинный, то рекомендуется скрывать промежуточные положения и оставлять только две ссылки.

## Интерактивный дизайн

Взаимодействие с хлебными крошками похоже на простой список упорядоченных ссылок.

### Управление клавиатурой

Клавиша `TAB`позволяет перейти от навигационной крошки к навигационной крошке.

Символы-разделители не должны фокусироваться с клавиатуры.

В последней строке навигации отсутствует значение href, поэтому она не указана в порядке табуляции.

### Screenreader

Программа чтения с экрана распознает хлебные крошки как ориентир навигации.

Каждая навигационная цепочка будет объявлена ​​как «ссылка», за которой следует текст ссылки.

Программа чтения с экрана должна игнорировать каждый значок разделителя.

## Код

Для хлебных крошек не требуется JavaScript, они представляют собой просто упорядоченный список ссылок и значков внутри области навигационных ориентиров.

{% tabs %}
{% tab title="XML/HTML/SVG" %}
```markup
 <nav aria-labelledby="breadcrumbs_heading" class="container breadcrumbs" role="navigation">
            <h2 class="clipped" id="breadcrumbs_heading">Вы здесь</h2>
            <ol class="breadcrumbs__list">
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" href="http://www.ebay.com">Home</a>
                  <img class="breadcrumbs__icon" src="/img/svg/icons.svg#arrow" alt="" />
               </li>
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" href="http://www.ebay.com">Clothing, Shoes &amp; Accessories</a>
                  <img class="breadcrumbs__icon" src="/img/svg/icons.svg#arrow" alt="" />
               </li>
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" href="http://www.ebay.com">Men's Shoes</a>
                  <img class="breadcrumbs__icon" src="/img/svg/icons.svg#arrow" alt="" />
               </li>
               <li class="breadcrumbs__item">
                  <a class="breadcrumbs__link" aria-current="location">Boots</a>
               </li>
            </ol>
         </nav>
```
{% endtab %}

{% tab title="SCSS" %}
```
.breadcrumbs {
   &__list {
      display: flex;
      flex-wrap: wrap;
   }
   &__list li + li {
      margin-left: 5px;
   }

   &__item {
   }
   &__item:last-child,
   &__item:first-child {
      @media (max-width: $md0+px) {
         display: none;
      }
   }

   &__link {
      color: var(--color-black);
      text-decoration: none;
      font-size: 12px;
   }
   &__link:hover:not(:last-child) {
      text-decoration: underline;
   }

   &__icon {
      width: 10px;
   }
}

```
{% endtab %}
{% endtabs %}

Заголовок («Вы здесь») обычно скрывается за кадром с помощью класса .[clipped](https://danila-korotkov.gitbook.io/front-end-patterns/effekty-css-1/skryvat-blok-.clipped).

Хотя значок разделителя можно создать с помощью CSS, мы обнаружили, что встроенный SVG предлагает более доступный и гибкий подход.

## ARIA

* **aria-current="location"**: предоставляет AT программное состояние на хлебной крошке, которое отражает текущее расположение сайта;
* **role=navigation**: создает ориентир для AT.
