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

Размеры

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

Выпадающие элементы в хлебных крошках

Пользовательский шаблон

Внешний вид задают две директивы. kbqBreadcrumbView заменяет содержимое отдельного пункта, а kbqBreadcrumbsSeparator — разделитель между пунктами.

Количество видимых пунктов

max ограничивает число одновременно показанных пунктов: остальные сворачиваются в выпадающий список за кнопкой раскрытия. Кнопка занимает одно из мест, поэтому [max]="4" отображает три пункта и кнопку. Значение null снимает ограничение, и тогда пункты скрываются при нехватке ширины.

routerLink рекомендуется указывать у каждого kbq-breadcrumb-item: выпадающий список строит скрытые пункты из text и routerLink, поэтому пункт без адреса превращается в строку без перехода.

Отключенное состояние

disabled переводит хлебные крошки в режим только для чтения: пункты и кнопка раскрытия перестают вести на страницы и не принимают фокус по клавише Tab.

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

У отдельного пункта есть собственный disabled с тем же действием.

Сокращение пунктов

Пункты могут содержать наименования с разной величины.
Режимы ниже — это приемы, а не свойства компонента: каждый из них задает стили, которые приложение применяет к отрисованным пунктам. В примерах эти стили собраны в блоке styles, и переносить их нужно вместе с разметкой.

Сокращение по длине наименования

Стандартный прием сокращения, при котором наименование будет обрезано после первых 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
        })
    ]
})

Перенос строк

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

Режим без переноса строки

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

Когда нужен перенос?

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

Доступность

Хлебные крошки — это ориентир навигации. Компонент проставляет роль navigation на <kbq-breadcrumbs>, а у <nav kbq-breadcrumbs> эта роль есть изначально.

Доступное имя приходит из активной локали. Если на странице несколько блоков хлебных крошек, им нужно задать разные имена через aria-label — так вспомогательные технологии их различат:

<nav kbq-breadcrumbs aria-label="Навигация по разделу">...</nav>

Разделитель по умолчанию скрыт от вспомогательных технологий, поэтому они не зачитывают знаки между пунктами. Разделитель, переданный через kbqBreadcrumbsSeparator, тоже нужно скрыть:

<ng-template kbqBreadcrumbsSeparator>
    <span aria-hidden="true">→</span>
</ng-template>

Последнему пункту компонент проставляет атрибут aria-current="page". Если хлебные крошки не заканчиваются текущей страницей — например, карточка открыта из списка, — нужный пункт отмечают свойством current.

Управление с клавиатуры