и так далее. (Извиняюсь за ребус) :-)

Если у Вас шаблон на блоге похож на мой, в том смысле, что бэкграунд серый а сам блок с контентом белый, крошки лучше всего ставить над блоком, как у меня. Потому что они могут перенестись на новую строку если название слишком длинное и, поверьте, это не очень красиво. :-)

Вот и всё. Дорогие друзья, если возникнут какие то трудности обязательно спрашивайте в комментариях . До скорых встреч.

Доброго времени суток, дорогие читатели!

Как влияют хлебные крошки на поисковую оптимизацию и как сделать их на сайте с WordPress. Именно об этом пойдет речь в сегодняшней статье. Забегая вперед, скажу, что breadcrumbs помогают вашим пользователям ориентироваться на сайте. Также они имеют положительное влияние на SEO.

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

Они кликабельные, это значит, что посетитель в любой момент может перейти на “уровень” выше – в подрубрику или рубрику. Как правило, breadcrumbs имеют такой вид: главная – рубрика – подрубрика – статья. Последний элемент очень часто удаляют, полагая, что это создает ненужное дублирование.

Считается, что это название – отсылка к сказке, где дети при походе в лес оставляли за собой дорожку из хлебных крошек для навигации. По этой дорожке они должны были вернуться обратно. Цепочка ссылок тоже представляет собой дорожку, чем дальше на сайт, тем большей в ней элементов. И по сути, по этой цепочке можно вернуться обратно – на главную страницу. Точно так же, как и в сказке.

Как влияют на SEO

Использование навигационной ленты считается хорошим тоном в мире поисковой оптимизации.

Во-первых, она улучшает поведенческие факторы. А это, как известно, чуть ли не самый основной показатель качества сайта. Если юзабилити будет на хорошем уровне, использование и навигация будут понятными и удобными, то посетители определенно это оценят и останутся на ресурсе дольше. К тому же, чем лучше поведенческие факторы, тем выше ваш ресурс будет в выдаче.

Во-вторых, наличие breadcrumbs уже считается хорошим фактором для поисковика. Роботы видят, что на проекте есть система навигации, структура, и это хорошо сказывается на ранжировании.

Естественно, одна лишь навигационная панель не будет выводить ваш ресурс в топ. Это работает вместе с другими аспектами грамотной SEO-оптимизации.

Если подводить итог, то breadcrumbs помогают:

• улучшить поведенческие факторы и юзабилити,
• сделать структуру сайта понятной и доступной,
• легко перемещаться по страницам,
• улучшить SEO в техническом плане,
• сделать перелинковку.

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

Виды хлебных крошек

Да-да, у них есть и разновидности. Их не так много, но все равно стоит учитывать этот момент.

Линейный

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

Кнопка “Назад”

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

Гибрид

Этот вариант объединяет два предыдущих. То есть на ресурсе присутствует и линейная навигация и кнопка “Назад”. Можно сказать, что это компромисс, который помогает угодить всем. Но, как я и сказал выше, кнопкой “Назад” люди пользуются крайне редко, предпочитая ей кнопку в самом браузере – благо такие есть во всех современных приложениях.

Обычно навигационная панель расположена на всех страницах, кроме главной. В WordPress это рубрики, метки, статьи и прочие таксономии.

Как создать хлебные крошки на WordPress

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

С помощью шаблона

Разумно будет выбрать шаблон сразу с хлебными крошками. Если вы только продумываете дальнейший сайт и еще не приступили к его созданию – стоит заглянуть в какой-нибудь магазин шаблонов WordPress и поискать там тему с этой функцией (советую Root).

Это будет наиболее практичный вариант, потому как вам не придется устанавливать дополнительные плагины. При этом вам не придется вручную что-то дописывать или править, все будет работать, что называется, из коробки (сразу после установки).

Плагины

Вы можете установить навигационную ленту вместе с плагином. Но учитывайте, что каждый плагин может нагружать вашу CMS еще больше. Если плагинов и так много, то еще один новый может попросту все испортить, замедлив работу сайта.

Yoast SEO – подробная инструкция по настройке крошек

Если в качестве SEO-плагина вы используете – у меня для вас отличные новости. Breadcrumbs присутствуют в функционале, поэтому вам остается лишь настроить их.

Это общая инструкция, которая должна подойти большинству пользователей. Она основана на той информации, которую дают сами авторы плагина.

Итак, для того чтобы навигационная лента в Yoast SEO работала мы должны разместить в файлах нашего шаблона следующий PHP-код:

Обычно этот код вставляют в общие шаблоны страниц – single.php или page.php. Также некоторые пользователи вставляют этот код в header.php – в самый конец. Сработает ли это конкретно в вашем случае или нет – я не знаю, но вы можете попробовать.

Общие шаблоны страниц можно редактировать через встроенные инструменты WordPress. Идем во “Внешний вид” – “Редактор”, находим нужный файл в списке.

Здесь представлен PHP-код и HTML-разметка. Неподготовленный пользователь может запутаться, но нужно собраться и попытаться понять что и где.

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

Лучше всего разместить breadcrumbs прямо под header – функция get_header (); – как раз служит для его вызова. Поэтому правильно будет расположить код из Yoast SEO прямо под ним.

Но учтите, что для кастомизации навигационной ленты, возможно, придется поработать с CSS-стилями. Они предусмотрены и самим плагином, но могут не подойти.

Вы можете использовать хлебные крошки даже в статьях. Вам нужно просто оставить в нужном месте такой шорткод: .

Но ни код, ни шорткод не будут работать, если функция навигационной цепочки отключена в самом плагине. Чтобы включить ее, вы должны перейти в настройки плагина (вкладка “SEO”) – отображение в поисковой выдаче – хлебные крошки.

Переключите ползунок на “Включено”, после чего прокрутите страницу вниз и нажмите “Сохранить изменения”. С этого момента хлебные крошки начнут работать.

При желании вы можете настроить их. Например, задать разделитель между элементами, прописать текст ссылки на главную страницу, префиксы для таксономий и т. д.

Также вы можете выделять последнюю страницу (или название материала) жирным. Для этого переключите соответствующий ползунок.

Если Yoast SEO вам не особо подходит, то можно обратить внимание на другие плагины, позволяющие создать breadcrumbs на вашем сайте. В каталоге бесплатных их очень много, но я выделю наиболее популярные варианты.

Breadcrumb NavXT

Простой плагин, который может создать breadcrumbs для вашего проекта. На данный момент у него более 800 тысяч активных пользователей. Плагин имеет собственную панель управления и подходит для большинства сайтов на WordPress.

В Breadcrumb NavXT можно настроить почти все. Внешний вид, отображаемые элементы и их порядок. Тут намного больше возможностей, чем в том же Yoast SEO (именно относительно настройки навигационной цепочки).

Данное расширение можно установить абсолютно бесплатно из каталога WordPress. Найти его можно по ключевым словам.

Breadcrumb

Еще одно расширение, которое может быть установлено прямо из каталога. В отличие от предыдущего, этот плагин не имеет такой большой аудитории. Всего 10 000 активных пользователей. Но если учесть, что многие отдают предпочтение другим вариантам создания навигационных цепочек, то это вполне себе неплохой результат.

Плагин простой и легкий. Имеет красивый дизайн (см. скриншот), можно менять цвета. Для использования на небольших проектах его хватит с лихвой.

Есть и другие плагины. Они менее популярны, но вы все равно можете попробовать их. Просто зайдите в каталог плагинов и введите ключевое слово breadcrumbs. ВордПресс сразу выдаст вам несколько десятков подходящих вариантов.

Заключение

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

Практически все современные сайты стараются уделять этому внимание. Не отстают и веб-дизайнеры, сейчас отсутствие breadcrumbs в шаблоне считается очень весомым недостатком. Кто-то даже откажется покупать такой шаблон, только из-за этой, казалось бы, незначительной мелочи. Обязательно учитывайте этот факт и старайтесь делать свой сайт удобным для пользователей.

Если вы хотите узнать больше о создании информационных проектов под заработок, то я советую вам заглянуть на . Автор рассказывает о создании сайта на WordPress, грамотной технической и поисковой оптимизации, а самое главное – об актуальных способах монетизации.

На этом уроке познакомитесь с процессом создания в Bootstrap 3 и 4 навигационных цепочек («хлебных крошек»).

Разметка навигационных цепочек

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

"Хлебные крошки" в Bootstrap – это обычный упорядоченный список с классом breadcrumbs . Разделитель элементов списка автоматически добавляется с помощью CSS (bootstrap.min.css) через следующий класс:

Breadcrumbs > li + li:before { color: #cccccc; content: "/"; padding: 0 5px; }

Пример создания "хлебных крошек" с помощью Bootstrap.

1. Главная

1. Главная
2. Процессоры

1. Главная
2. Процессоры
3. Intel

Оформление навигационных цепочек в Bootstrap

Ещё один пример:

1. Главная
2. 2013
3. Ноябрь

Хлебные крошки для навигации по архивной информации

Не стандартный вариант оформления хлебных крошек

Рассмотрим пример создания следующего варианта оформления хлебных крошек:

Пример оформления хлебных крошек на сайте

Процесс создания хлебных крошек складывается из разработки HTML структуры и стилей (CSS).

CSS хлебных крошек:

/* хлебные крошки */ #breadcrumb { list-style: none; display: inline-block; padding-left: 0px; } #breadcrumb .icon { font-size: 14px; } #breadcrumb li { float: left; } #breadcrumb li a { color: #fff; display: block; background: #cc2eaa; text-decoration: none; position: relative; height: 34px; line-height: 34px; padding: 0 10px 0 5px; text-align: center; margin-right: 23px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #breadcrumb li:first-child a { padding-left: 15px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px; border-radius: 4px 0 0 4px; } #breadcrumb li:first-child a:before { border: none; } #breadcrumb li:last-child a { padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-radius: 0 4px 4px 0; } #breadcrumb li:last-child a:after { border: none; } #breadcrumb li a:before, #breadcrumb li a:after { content: ""; position: absolute; top: 0; border: 0 solid #cc2eaa; border-width: 17px 10px; width: 0; height: 0; } #breadcrumb li a:before { left: -20px; border-left-color: transparent; } #breadcrumb li a:after { left: 100%; border-color: transparent; border-left-color: #cc2eaa; } #breadcrumb li a:hover { background-color: #a22587; } #breadcrumb li a:hover:before { border-color: #a22587; border-left-color: transparent; } #breadcrumb li a:hover:after { border-left-color: #a22587; } #breadcrumb li a:active { background-color: #a22587; } #breadcrumb li a:active:before { border-color: #a22587; border-left-color: transparent; } #breadcrumb li a:active:after { border-left-color: #a22587; } #breadcrumb li.current a { pointer-events: none; cursor: not-allowed; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; opacity: .65; }

Изменения цвета производится посредством редактирования значений соответствующих CSS свойств.

HTML разметка:

1. Главная
2. Комплектующие
3. Процессы
4. Intel

Веделение текущего элемента (если он будет использоваться в цепочке) осуществляется с помощью добавления к элементу li класса current .

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

Разметка HTML

Разметка проста и минимальна. Она основана на неупорядоченном списке.

• Lorem ipsum
• Vivamus nisi eros
• Nulla sed lorem risus
• Nam iaculis commodo
• Вы здесь

CSS

Для начала сделаем небольшой сброс CSS для нашего неупорядоченного списка:

Ul{ margin: 0; padding: 0; list-style: none; }

Для дизайна наших "хлебных крошек" будут использоваться псевдо-элементы.

Первый пример

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

#breadcrumbs-one{ background: #eee; border-width: 1px; border-style: solid; border-color: #f5f5f5 #e5e5e5 #ccc; border-radius: 5px; box-shadow: 0 0 2px rgba(0,0,0,.2); overflow: hidden; width: 100%; } #breadcrumbs-one li{ float: left; } #breadcrumbs-one a{ padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: #ddd; background-image: linear-gradient(to right, #f5f5f5, #ddd); } #breadcrumbs-one li:first-child a{ padding-left: 1em; border-radius: 5px 0 0 5px; } #breadcrumbs-one a:hover{ background: #fff; } #breadcrumbs-one a::after, #breadcrumbs-one a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em; } #breadcrumbs-one a::after{ z-index: 2; border-left-color: #ddd; } #breadcrumbs-one a::before{ border-left-color: #ccc; right: -1.1em; z-index: 1; } #breadcrumbs-one a:hover::after{ border-left-color: #fff; } #breadcrumbs-one .current, #breadcrumbs-one .current:hover{ font-weight: bold; background: none; } #breadcrumbs-one .current::after, #breadcrumbs-one .current::before{ content: normal; }

Формы CSS строятся с помощью псевдо-элементов, размещаемых перед и после элемента.

#breadcrumbs-two{ overflow: hidden; width: 100%; } #breadcrumbs-two li{ float: left; margin: 0 .5em 0 1em; } #breadcrumbs-two a{ background: #ddd; padding: .7em 1em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; } #breadcrumbs-two a:hover{ background: #99db76; } #breadcrumbs-two a::before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border-color: #ddd #ddd #ddd transparent; left: -1em; } #breadcrumbs-two a:hover::before{ border-color: #99db76 #99db76 #99db76 transparent; } #breadcrumbs-two a::after{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #ddd; right: -1em; } #breadcrumbs-two a:hover::after{ border-left-color: #99db76; } #breadcrumbs-two .current, #breadcrumbs-two .current:hover{ font-weight: bold; background: none; } #breadcrumbs-two .current::after, #breadcrumbs-two .current::before{ content: normal; }

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

#breadcrumbs-three{ overflow: hidden; width: 100%; } #breadcrumbs-three li{ float: left; margin: 0 2em 0 0; } #breadcrumbs-three a{ padding: .7em 1em .7em 2em; float: left; text-decoration: none; color: #444; background: #ddd; position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-radius: .4em 0 0 .4em; } #breadcrumbs-three a:hover{ background: #abe0ef; } #breadcrumbs-three a::after{ background: #ddd; content: ""; height: 2.5em; margin-top: -1.25em; position: absolute; right: -1em; top: 50%; width: 2.5em; z-index: -1; transform: rotate(45deg); border-radius: .4em; } #breadcrumbs-three a:hover::after{ background: #abe0ef; } #breadcrumbs-three .current, #breadcrumbs-three .current:hover{ font-weight: bold; background: none; } #breadcrumbs-three .current::after{ content: normal; }

С помощью псевдо-элементов добавляются два прямоугольника. Затем им скругляются углы.

#breadcrumbs-four{ overflow: hidden; width: 100%; } #breadcrumbs-four li{ float: left; margin: 0 .5em 0 1em; } #breadcrumbs-four a{ background: #ddd; padding: .7em 1em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.5); position: relative; } #breadcrumbs-four a:hover{ background: #efc9ab; } #breadcrumbs-four a::before, #breadcrumbs-four a::after{ content:""; position:absolute; top: 0; bottom: 0; width: 1em; background: #ddd; transform: skew(-10deg); } #breadcrumbs-four a::before{ left: -.5em; border-radius: 5px 0 0 5px; } #breadcrumbs-four a:hover::before{ background: #efc9ab; } #breadcrumbs-four a::after{ right: -.5em; border-radius: 0 5px 5px 0; } #breadcrumbs-four a:hover::after{ background: #efc9ab; } #breadcrumbs-four .current, #breadcrumbs-four .current:hover{ font-weight: bold; background: none; } #breadcrumbs-four .current::after, #breadcrumbs-four .current::before{ content: normal; }

Преимущества дизайна "хлебных крошек" на основе CSS3

• Нет изображений, поэтому просто обновлять и поддерживать.
• Легко масштабируется.
• Обратная совместимость со старыми браузерами.

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

Что такое breadcrumb?

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

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

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

Когда нужно использовать Breadcrumbs?

Используйте навигационную цепочку для крупных веб-сайтов и веб-сайтов с иерархической организацией страниц.

Не следует использовать «хлебные крошки» для одноуровневых сайтов, которые не имеют никакой логической иерархии или группировки.

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

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

Виды Breadcrumbs

Существуют три основных вида «хлебных крошек» .

На основе местоположения

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

На основе свойств

«Хлебные крошки» на основе свойств отражают атрибуты конкретной страницы.

На основе пути

Они показывают путь, которым пользователь прошел на текущую страницу. Этот путь является динамическим, Одна и та же страница может иметь разные адреса.

Преимущества использования Breadcrumbs

Они могут помочь пользователю

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

Снижает количество кликов или действий для возвращения на страницы более высокого уровня

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

Как правило, не засоряют экран

Они, как правило, имеют горизонтальную ориентацию и поэтому не занимают на странице много места.

Снижают показатель отказов

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

Ошибки при использовании Breadcrumbs

Использовать «хлебные крошки» достаточно просто. Но прежде, чем реализовывать их на сайте, нужно рассмотреть некоторые ошибки, которых следует избегать.

Использование навигационных цепочек, когда в этом нету необходимости

Распространенной ошибкой является использование «хлебных крошек», когда в этом нету никакой выгоды.

В примере выше мы можем наблюдать слишком много вариантов навигации, которые размещены достаточно близко друг к другу: первичная навигацию, «хлебные крошки» и вторичная навигация.

Использование «хлебных крошек» в качестве основной навигации

Как уже было отмечено раньше, «хлебные крошки» нужно использовать в качестве дополнительной помощи к навигации.

Использование «хлебных крошек», когда страницы имеют несколько категорий

Навигационные цепочкм имеют линейную структуру, поэтому их будет трудно использовать, если ваши страницы не могут быть разделены на четкие категории. Решение о том, использовать ли «хлебные крошки» во многом зависит от того, как вы создали свой ​​сайт иерархии. При низком уровне страницы использование "хлебных крошек" является неэффективным, неточным и запутанным для пользователя.

Дизайн «хлебных крошек»

При разработке цепочек навигации, могут возникнуть некоторые вопросы. Например:

Какой символ нужно использовать для отделения ссылок?

Общепринятым и наиболее узнаваемым символ для разделения гиперссылок в «хлебных крошках» является символ «больше, чем» - (>).

Также можно использовать кавычки, указывающие на правый угол (») и косую черту (/).

Выбор зависит от самого сайта и вида цепочки, который вы используете. Например, если ссылки в «хлебных крошках» не имеют иерархическое отношения друг к другу, использование символа «больше, чем >» может не точно передать их суть.

Какими они должны быть?

Вы ведь не хотите, чтобы ваши «хлебные крошки» доминировали на странице. Их следует использовать в качестве дополнительной помощи для пользователей (для удобства), поэтому их размер тоже должен соответствовать этому и правильно донести до пользователей эту функцию — они должны быть меньше или менее заметными, чем первичная навигация по меню.

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

Где должны быть расположены «хлебные крошки»?

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

Статистика

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

Ориентация цепочек

95% — горизонтальная

5% Вертикальная

Разделитель между элементами (для горизонтальных цепочек)

Примеры использования breadcrumbs в web-дизайне

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

Классическое использование «хлебных крошек»

Использование других символов