Хлебные крошки

Хлебные крошки для сайта

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

Как использовать хлебные крошки в UIkit 3

Компонент Breadcrumb состоит из ссылок, которые располагаются горизонтально и разделены разделителем. Добавьте класс .uk-breadcrumb к элементу <ul> для активации компонента. Используйте тег <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="#">Главная</a></li>
    <li><a href="#">Каталог</a></li>
    <li class="uk-disabled"><a>Неактивная ссылка</a></li>
    <li><span>Элемент span </span></li>
</ul>