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

Хлебные крошки имеют несколько размеров для большей гибкости при адаптации к разным интерфейсам.

Пункты могут содержать наименования с разной величины.
Ниже представлены режимы для настройки длины отображаемых пунктов и их кол-ва.

Стандартный прием сокращения, при котором наименование будет обрезано после первых 14 символов.

Для случаев, когда необходимо выделить уникальный идентификатор в конце наименования

Для случаев, когда необходимо выделить начало наименования и его окончание.

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

По умолчанию панель хлебных крошек смещена влево на --kbq-breadcrumb-item-negative-margin, используя негативный отступ. Это поведение можно изменить при помощи свойства firstItemNegativeMargin.

Для определенных хлебных крошек:

@Component({
    template: `
        <nav
            kbq-breadcrumbs
            [firstItemNegativeMargin]="false"
            >...
        </nav>
    `
})

Для всех хлебных крошек в модуле, используя Dependency Injection при помощи kbqBreadcrumbsConfigurationProvider провайдера:

import { kbqBreadcrumbsConfigurationProvider } from '@koobiq/components/breadcrumbs';

@NgModule({
    providers: [
        kbqBreadcrumbsConfigurationProvider({
            firstItemNegativeMargin: false
        })
    ]
})

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

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

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

Клавиша	Поведение
Tab	Переход к началу навигации: При переключении фокуса на хлебные крошки, курсор автоматически перемещается на первый элемент навигационного пути.
Enter \ Space	Активация элемента. Переход по ссылке: Если выбранный элемент соответствует ссылке на другую страницу, происходит переход. Раскрытие списка: Для элементов с выпадающими списками, открывается список и фокус переносится на первый элемент в списке. Вызов действия: Если элемент имеет связанное с ним действие (например, вызов всплывающего окна), это действие выполняется. Без действия: Для остальных элементов, никаких действий не происходит.
Right Arrow \ Left Arrow	Перемещение по элементам: Позволяют перемещаться по элементам навигации вперед или назад. При достижении конца или начала списка, курсор циклически переходит на противоположный конец.
Bottom Arrow	Раскрытие выпадающего списка: если текущий элемент содержит вложенный список, он будет раскрыт.
Home	Переход к началу: Перемещает фокус на первый элемент навигации.
End	Переход к концу: Перемещает фокус на последний элемент навигации.