Компонент Навигационная цепочка

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

Навигационная цепочка ("хлебные крошки") показывает путь от некоего начального элемента до того уровня иерархии, который в данный момент просматривает пользователь. Хлебные крошки обычно отображаются в виде горизонтальной полосы. Эта часть горизонтальной навигации создана для удобства пользователя, который после прочтения статьи может посетить категорию этой статьи.

Breadcrumb. Обзор. Создание.

Компонент Навигационная цепочка состоит из ссылок, которые выровнены рядом друг с другом и разделены разделителем. Чтобы определить компонент Breadcrumb, нужно добавить к элементу <ul> класс .uk-breadcrumb. Используйте элементы <a> как элементы крошки в списке. Активное состояние автоматически применяется к последнему элементу <li>.

Чтобы добавить элементы списка без ссылки, используйте элемент <span> вместо <a>. Или же отключите элемент <a>, добавив класс .uk-disabled к элементу <li>, и удалите атрибут href и анкор, чтобы сделать его недоступным.

<ul class="uk-breadcrumb">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>

Разметка. Пример

  • <ul class="uk-breadcrumb">
        <li><a href="https://asuikit.com/v3" uk-icon="home"></a></li>
        <li><a href="#">Пункт</a></li>
        <li class="uk-disabled"><a>Отключено</a></li>
        <li><span>Активный пункт</span></li>
    </ul>
Документация
Компоненты