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

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

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

Breadcrumb: Создание

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>
Разметка

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

<nav aria-label="Breadcrumb">
	<ol class="uk-breadcrumb">
		<li><a href="/" uk-icon="home" aria-label="Главная"></a></li>
		<li><a href="#">Категория</a></li>
		<li class="uk-disabled"><a>Отключено</a></li>
		<li><span aria-current="page">Текущий пункт</span></li>
	</ol>
</nav>

Доступность

Чтобы компонент Breadcrumb соответствовал шаблону Breadcrumb Pattern, задайте соответствующие роли, состояния и свойства WAI-ARIA.

  • Содержите список навигационных цепочек в элементе nav и задайте свойство aria-label для описания типа предоставленной навигации.
  • Если последним элементом является текущая страница, то необходимо установить свойство aria-current="page". 
<nav aria-label="Breadcrumb">
    <ul class="uk-breadcrumb">…</ul>
</nav>