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

Хлебные крошки — навигационная цепочка, которая, как правило, показывает путь от главной страницы к текущей. Ее можно встретить на очень многих веб-проектах, хотя визуально она обычно не особо выделяется. Данный скромный элемент сайта выполняет важные функции:

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

Предлагаем вам рассмотреть несколько вариантов оформления хлебных крошек (breadcrumbs на английском). Возможно данная статья пригодится в разработке ваших будущих проектов.

TypePad

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

Иногда в макете выделяют специальное место для навигационной строки.

Psd Tuts

ClearLeft

Chairs

Pets Site

WuFoo

Вместо ссылки «Главная» можно использовать иконку домика или лого.

AbsolutePunk

Стандартное меню хлебных крошек

Pharmacy

Roxy.com

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

T-Shirt магазин

BP

Классические хлебные крошки

Great Bags

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

Delicious

Список меток — одна из разновидностей реализации Breadcrumbs меню.

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

Devlounge

CoolSpotters

Ideo

Walmart

Pixelpoodle

Guardian

Хлебные крошки с выпадающим меню

В элемент пути по сайту иногда добавляется выпадающее меню.

Пример Breadcrumbs

Вставлять иконки можно в любые элементы хлебных крошек.

Girl Scounts

Yahoo Canada

Market Watch

MSDN

Пример хлебных крошек

Apple Shop JomSocial

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

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

Часто данный элемент встречается в наборах UI/UX дизайна. Если вас интересует вопрос внедрения навигационного блока, загляните в Bootsnipp где собрана парочка сниппетов с примерами хлебных крошек на сайтах в HTML/CSS. Также можно почитать о том как сделать хлебные крошки для WordPress сайта.

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

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

Советы по хлебным крошкам на сайте:

  • Внешний вид блока должен сочетаться с сайтом, не перетягивать на себя внимание и ясно свидетельствовать о том, что это элемент навигации. Однако при этом меню и хлебные крошки не должны сливаться дабы не запутать пользователя.
  • Разделители унифицируют: используйте только один знак;
  • Текущая страница выделяется цветом, ссылка делается некликабельной;
  • Размещать данную цепочку лучше вверху, так как это привычно и ожидаемо;
  • Дополнительная навигация должна быть на всех страницах и оформляется в одном стиле.
  • Кстати, выделяют всего 3 типа меню хлебных крошек: указывающее путь по сайту к текущей странице, ее вложенность (иерархию/положение) либо атрибуты (метки).

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

Если встречали еще какие-то интересные и красивые примеры хлебных крошек — присылайте ссылки в комментариях. 

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *