Toolbar на сайте: нижняя панель навигации и польза для UX

25.10.2026 admin 6 мин чтения

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

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

Toolbar — это закреплённая панель в нижней части экрана. Она остаётся на месте при прокрутке и не сдвигает контент: страница прокручивается под ней, а панель лежит поверх.

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

Панель подключается вместе со скриптом newUX и настраивается в кабинете. Отдельный плагин или правки шаблона не нужны.

Какие пункты можно добавить

В toolbar доступно восемь типов пунктов. На панели можно разместить не больше шести — этого достаточно для главных действий и мало для перегруженного меню.

Ссылка

Обычный переход на страницу сайта: каталог, услуги, цены, блог. Для ссылки можно выбрать иконку и открыть её в новой вкладке.

Email

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

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

Пункт ведёт в Telegram по нику или ссылке. Удобен, если вы общаетесь с клиентами в мессенджере и хотите сократить путь до диалога.

Кнопка действия

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

Обратная связь

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

Подписка на рассылку

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

Наверх

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

Оформление и поведение панели

Внешний вид настраивается под сайт, а не наоборот:

Три темы — светлая, тёмная и брендовая. Акцентный цвет задаётся отдельно для каждой темы, контраст проверяется при сохранении.
Подписи пунктов можно включить или выключить. На узких экранах подписи скрываются автоматически, остаются понятные иконки.
Сворачивание. Можно разрешить посетителям скрывать панель в компактную кнопку. Состояние запоминается, поэтому панель не будет возвращаться при каждом переходе.
Изоляция стилей. Панель не конфликтует с вёрсткой сайта: её оформление не ломает страницу, а стили сайта не меняют её вид.
Лимит в шесть пунктов. Ограничение заставляет выбрать главное и не превращать панель в копию основного меню.

Как панель улучшает UX

Главное действие всегда на виду

Клиенту не нужно искать телефон или кнопку заявки. Если он готов к разговору, действие находится в одном касании — независимо от того, где он находится на странице.

Меньше шагов до контакта

Чем короче путь от интереса до действия, тем меньше людей отваливается. Панель убирает лишние прокрутки и поиск контактов в футере.

Удобно на телефоне

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

Единый сценарий на всех страницах

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

Интерфейс не перегружается

Шесть пунктов — жёсткий лимит. Он не даёт добавить всё сразу и заставляет расставить приоритеты: звонок, сообщение, заявка. В результате панель помогает, а не мешает.

Услуги и локальный бизнес. Клиенту нужен телефон или маршрут — панель держит контакт под рукой.
Небольшой магазин. Ссылки на каталог, корзину и консультацию помогают не потерять покупателя.
Лендинги. Главный призыв к действию остаётся на экране, даже если посетитель дошёл до середины страницы.
Длинные статьи и блоги. Возврат наверх и подписка на рассылку работают без поиска по странице.

Когда панель может навредить

Панель не заменяет нормальную навигацию и не исправляет слабую структуру сайта. Она мешает, если:

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

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

Доступность и производительность

Панель рассчитана на WCAG 2.1 AA: у пунктов крупные зоны нажатия, есть управление с клавиатуры и видимый фокус. Даже если подписи скрыты, у пунктов остаются доступные названия для экранных дикторов.

Возврат наверх учитывает настройку prefers-reduced-motion: при отключённых анимациях страница прокручивается без плавного эффекта.

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

Добавьте сайт в кабинет и подключите скрипт newUX. Инструкция — в статье «Как подключить скрипт newUX».
Включите функцию «Панель навигации (Toolbar)» в настройках сайта.
Добавьте пункты и расположите их в порядке важности.
Выберите тему и акцентный цвет, проверьте контраст.
Решите, нужны ли подписи и возможность скрыть панель.
Если есть подписка на рассылку, укажите ссылку на политику конфиденциальности.
Проверьте панель на телефоне и на длинной странице: все ли кнопки нажимаются, понятны ли иконки, не перекрывает ли панель важный блок.

Чек-лист

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

Итог

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

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

Что такое toolbar на сайте