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

Создавайте «хлебные крошки» на сайте, чтобы показать пользователям их местоположение на веб-сайте. Дублирующее меню (Breadcrumbs) - один из видов навигации по сайту, играет важную роль для SEO. Обзор, разметка, пример.

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

Создание

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="" uk-icon="home"></a></li>
        <li><a href="#">Пункт</a></li>
        <li class="uk-disabled"><a>Отключено</a></li>
        <li><span>Активный пункт</span></li>
    </ul>