Компонент Навигационная цепочка 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>
Разметка

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

  • <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>Текущий пункт</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>
Breadcrumb