10 бесплатных сниппетов навигационных цепочек для веб-проектов
Навигационные цепочки («хлебные крошки», breadcrumb) делают организацию более понятной и мотивируют пользователей глубже просматривать сайт.
Но разработка собственных навигационных цепочек – задача довольно сложная. Поэтому я сделал подборку бесплатных панелей хлебных крошек, которые вы можете использовать на своих сайтах.
Thick Breadcrumbs
Навигационная панель создана с использованием чистого CSS и бесплатных иконок от Font Awesome.
Благодаря ненавязчивой цветовой гамме вы можете использовать эту навигацию практически для любого сайта. Иконки созданы с помощью файлов шрифтов, поэтому они масштабируются без потери качества.
Flat CSS3 Design
Плоский дизайн все еще актуален. Если вы создаете сайт с использованием однородных цветов, тогда стоит использовать этот плоский навигационный дизайн, созданный на CSS.
Стрелки созданы с использованием CSS и Sass, что облегчает редактирование. Вы можете быстро сменить фон или цвет при наведении, изменив одну переменную Sass.
Данная навигационная панель использует библиотеку Bootstrap, которая также включает в себя иконки Font Awesome.
Bright Colors
В этом примере используется дизайн с превосходными эффектами и цветовой схемой, которая идеально вписывается в макет.
Эта панель хлебных крошек идеально подойдет для карточки товара в интернет-магазине или сайта компании, где нужная яркая цветовая схема.
Fluid Step Nav
Часто хлебные крошки используются в процессе оформления заказа. На панели выделяется текущий этап.
Эта навигационная панель служит образцом реализации данного эффекта. В ней используется градиент для создания иллюзии глубины на странице.
Rounded Crumbs
В этой панели хлебных крошек применяется анимация, работающая на CSS.
Каждый элемент цепочки панели использует иконку из библиотеки Font Awesome. Эти иконки легко масштабируются и создают структуру всей навигационной цепочки.
При наведении мышки вы получаете более подробную информацию на расширяющихся ярлыках.
Pixel-Perfect Breadcrumbs
Дизайн этой навигации довольно простой и лаконичный: с цифрами и эффектами при наведении мыши. Каждая стрелка выполнена на чистом CSS, а элементы навигационной цепочки идеально сочетаются друг с другом.
Reverse Arrows
Большинство стрелок в навигационных цепочках направлены слева направо. Но в этой у стрелок обратное направление.
Обратите внимание, как подсвечен последний элемент цепочки. Благодаря этому эффекту пользователь видит, что это последняя позиция.
Highlights
В этом решении можно найти пару хороших примеров с темной и светлой темой оформления. Мне также нравится форма панели и эффект теней, который заметно выделяется на более светлом заднем фоне.
Custom Separators
Панель представляет собой простые ссылки с четкими разделителями между ними. Это отличный пример простого дизайна. В нем вы сможете изменить разделители исходя из вашего дизайна.
Credit Card Checkout
Страницы оформления заказа используют навигационные цепочки, чтобы заставить посетителей завершить процесс покупки. Данный пример наглядно демонстрирует это. В нем используется небольшое количество JavaScript для создания эффекта затухания при заполнении каждого поля.
Все примеры, приведенные в этой статье, помогут вам создавать навигационные цепочки для любого сайта. Но если вам необходимо еще больше примеров, поищите их здесь.
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, отклики, лайки, подписки, дизлайки низкий вам поклон!