Зачем вообще париться из-за хедера

Шапка сайта — это не просто полоска сверху. Это навигационный хаб, точка доверия и первый контакт с брендом. Пользователь принимает решение «остаться или уйти» за 2–3 секунды. И в эти секунды он смотрит именно наверх.

Что конкретно решает хедер:

  • Навигация. Человек должен мгновенно понять, куда ему нажать. Не через 10 секунд изучения — мгновенно.
  • Доверие. Логотип, контакты, возможно — информация о компании. Если шапка выглядит кустарно, весь сайт теряет вес.
  • Конверсия. CTA-кнопка в шапке — это не навязчивость, а удобство. Если у вас сервис или магазин, кнопка «Оставить заявку» или «Каталог» в хедере может дать ощутимый прирост обращений.

Практический пример: на одном из проектов — калькуляторном сервисе — после добавления кнопки «Рассчитать» прямо в шапку с контрастным оформлением количество кликов по ней выросло на 18% за первую неделю. Не потому что кнопка волшебная — просто люди перестали искать, куда нажать.

Анатомия хедера: из чего он состоит

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

Логотип

Всегда слева. Это не дизайнерское предпочтение, а паттерн чтения: мы сканируем страницу слева направо и сверху вниз (F-паттерн). Логотип слева — это якорь, с которого начинается восприятие. Он обязательно должен быть кликабельным и вести на главную.

Ошибка, которую можно встретить постоянно: логотип в формате PNG с белым фоном на тёмной подложке. Или SVG весом 800 КБ, потому что экспортировали из Illustrator без оптимизации. Мелочь, но такие вещи замедляют загрузку и выглядят неопрятно.

Основная навигация

Главное меню. На десктопе — горизонтальный список ссылок. На мобильных — бургер или выдвижная панель. Оптимальное количество пунктов — от 4 до 7. Это не выдумка UX-гуру, а результат исследований когнитивной нагрузки: больше семи элементов человек перестаёт воспринимать как единую группу.

Совет: если у вас 12 пунктов меню — это не меню, это каталог. Придётся группировать, выносить в подменю или вообще пересмотреть архитектуру.

Контактная информация

Телефон, e-mail, иногда адрес. Для коммерческих сайтов, особенно в сегменте услуг, телефон в шапке — обязательный элемент. Он сигнализирует: «Мы настоящие, нам можно позвонить».

Важный нюанс: на мобилке номер должен быть кликабельным (`tel:`-ссылка). Звучит очевидно, но до сих пор встречаются сайты, где телефон — просто текст, и скопировать его нельзя.

CTA-кнопка

«Заказать звонок», «Начать бесплатно», «Каталог» — зависит от бизнеса. Кнопка должна визуально выделяться: контрастный цвет, достаточный размер, понятный текст. Не «Далее», не «Подробнее» — а конкретное действие.

Дополнительные элементы

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

Фиксированная шапка: когда это нужно, а когда мешает

Sticky header — шапка, которая остаётся на экране при прокрутке. Это один из самых частых запросов от заказчиков, и одновременно один из самых спорных элементов.

Когда фиксированная шапка оправдана

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

Сервисные сайты и SaaS. Когда человек в любой момент может захотеть вернуться в личный кабинет, перейти в другой раздел или нажать на «Поддержку» — фиксированный хедер удобен.

Интернет-магазины. Корзина и поиск всегда под рукой — это реально влияет на конверсию.

Когда лучше не фиксировать

Мобильные экраны. На телефоне вертикальное пространство — дефицит. Шапка высотой 60–70 пикселей отъедает заметную часть экрана. Оптимальный вариант: на мобилке шапка скрывается при скролле вниз и появляется при скролле вверх. Это реализуется через `IntersectionObserver` или простой слушатель `scroll` с `requestAnimationFrame`.

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

Технический момент

Фиксированная шапка — это `position: sticky` или `position: fixed`. У `sticky` есть нюанс: элемент фиксируется только внутри своего родительского контейнера. Если структура HTML неудачная, `sticky` просто не сработает, и вы будете час искать баг.

Рецепт: `position: sticky; top: 0; z-index: 1000;` — и следить, чтобы ни один родитель не имел `overflow: hidden`. Это самая частая причина, по которой `sticky` отказывается работать.

Навигация: как не запутать пользователя

Навигация в шапке — это не просто список ссылок. Это маршрутная карта сайта, и от неё зависит, найдёт ли человек то, за чем пришёл.

Горизонтальное меню на десктопе

Классика, которая работает. Пункты идут в строку, при наведении — подменю (если нужно). Главные правила:

  1. Названия — короткие и понятные. «Услуги», а не «Перечень оказываемых нашей компанией услуг». Серьёзно, такое встречается.
  2. Активный пункт — визуально выделен. Подчёркивание, другой цвет, точка снизу — что угодно, но человек должен понимать, где он сейчас.
  3. Порядок имеет значение. Первым ставьте то, что ищут чаще всего. Это можно определить по данным Яндекс Метрики или Google Analytics — посмотрите, на какие страницы чаще переходят.

Мегаменю

Для крупных сайтов с десятками разделов мегаменю — разумный выбор. Это выпадающая панель с категориями, иногда с картинками и ссылками на популярные страницы. Хороший пример — большие маркетплейсы и сайты СМИ.

Но мегаменю легко превратить в кашу. Правило: максимум три колонки, максимум 20 ссылок в одном мегаменю, и обязательно — визуальная группировка заголовками.

Бургер-меню на мобильных

Три полоски. Все их знают, все к ним привыкли. Но есть нюансы:

  • Анимация открытия должна быть быстрой — 200–300 мс максимум. Если меню «выплывает» полсекунды, это раздражает.
  • Меню должно закрываться по нажатию на фон (оверлей) и по кнопке «Крестик». Два способа — это минимум.
  • Внутри мобильного меню пункты должны быть крупными — минимум 44×44 пикселя тапабельная зона. Это рекомендация Apple Human Interface Guidelines, и она абсолютно обоснована.

Ещё один вариант, который набирает популярность — нижняя панель навигации (bottom navigation bar) на мобилках. Да, как в приложениях. Палец ближе к нижней части экрана, и навигация буквально «под рукой». Для сервисных сайтов и веб-приложений это работает отлично.

Контакты в шапке: что показывать и как

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

Услуги и B2B

Телефон — обязательно, крупно, кликабельно. Часы работы — желательно (особенно если есть колл-центр). Кнопка «Заказать звонок» — если есть соответствующий виджет. Для B2B-сегмента телефон в шапке — это не просто контакт, это маркер надёжности.

Интернет-магазин

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

Информационный сайт или блог

Контакты в шапке обычно не нужны. Достаточно ссылки «Контакты» в меню навигации. Шапка блога — это логотип, рубрики и, возможно, поиск.

Портфолио

Здесь хорошо работает кнопка «Написать мне» или «Обсудить проект» — лаконично, конкретно и без лишней информации.

Дизайн шапки: тренды и антитренды в 2026

Что работает

Прозрачный хедер поверх hero-секции. Шапка без фона, которая накладывается на первый экран. При скролле фон появляется — через `backdrop-filter: blur()` или просто через смену цвета по событию. Смотрится чисто и современно, особенно на сайтах с крупными фоновыми изображениями.

Минимализм в структуре. Чем меньше элементов — тем лучше. Логотип, 3–5 пунктов меню, одна кнопка. Всё. Дополнительные элементы — в бургер или в подменю.

Микроанимации. Плавное появление шапки при скролле, hover-эффекты на пунктах меню, анимация бургер-иконки (три полоски → крестик). Не перебор, а тонкие штрихи, которые создают ощущение «живого» интерфейса.

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

Что уже не работает

Два-три ряда элементов в шапке. Верхняя полоска с контактами, потом логотип с меню, потом ещё панель с акциями — получается «бутерброд», который съедает 200+ пикселей экрана. Такой подход тянется из начала 2010-х, когда считалось, что чем больше информации «above the fold» — тем лучше.

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

Социальные иконки в шапке. Раньше было модно ставить в хедер иконки ВКонтакте, Телеграм и прочего. В 2026 году это скорее отвлекает. Соцсети — в футер.

Перегруженные мегаменю. Если при наведении на «Каталог» выпадает полотно на весь экран с 50 ссылками — это проблема навигационной архитектуры, а не хедера.

Адаптивность: как не испортить хедер на мобилке

По данным Яндекс Радара, более 70% трафика в рунете идёт с мобильных устройств. Это значит, что мобильная версия шапки — не «факультативная задача», а основной сценарий.

Чеклист для мобильного хедера:

  1. Высота — не больше 56–64 пикселей. Этого достаточно для логотипа и бургер-иконки.
  2. Логотип — компактная версия. Если на десктопе у вас текстовый логотип «Компания Ромашка», на мобилке оставьте иконку или аббревиатуру.
  3. Бургер-меню — справа. Большинство пользователей правши, и дотянуться до правого верхнего угла проще, чем до левого.
  4. Телефон — кликабельный, но не обязательно текстом. Можно вынести иконку телефона в шапку — компактно и функционально.
  5. Никакого горизонтального скролла. Если элементы шапки не влезают в ширину экрана и появляется горизонтальная прокрутка — это критический баг.

Breakpoints

Три контрольные точки для хедера:

  • До 768px — мобильная версия. Бургер, компактный логотип, минимум элементов.
  • 768–1024px — планшет. Можно показать часть меню или оставить бургер, зависит от количества пунктов.
  • От 1024px — десктоп. Полноценное горизонтальное меню.

В CSS это реализуется через `@media`-запросы. Подход mobile-first: сначала верстаем мобильную версию, потом через `min-width` расширяем до десктопа.

Производительность: шапка не должна тормозить

Хедер загружается первым, и если он тормозит — пользователь это чувствует. Вот на что стоит обращать внимание:

Шрифты. Если в шапке используется кастомный шрифт, он должен быть подключен с `font-display: swap` и предзагружен через `<link rel="preload">`. Иначе текст меню «мигает» — сначала системный шрифт, потом резко меняется на кастомный. Это называется FOUT (Flash of Unstyled Text), и это заметно.

Изображения. Логотип — в SVG. Точка. SVG масштабируется без потерь, весит меньше PNG и отлично выглядит на Retina-экранах. Если SVG по какой-то причине не подходит — WebP или AVIF.

JavaScript. Мобильное меню не должно подтягивать тяжёлые библиотеки. Бургер-меню — это `classList.toggle()` и немного CSS-транзишенов. Не нужен jQuery, не нужен отдельный плагин.

CLS (Cumulative Layout Shift). Если шапка подгружается с задержкой и «сдвигает» контент — это напрямую влияет на Core Web Vitals и позиции в поиске. Чтобы этого не было, всегда задавайте фиксированную высоту хедеру в CSS. Даже если содержимое загружается динамически, блок уже занимает своё место на странице.

Доступность: то, о чём часто забывают

Accessibility (a11y) — это не «бонус для галочки». Это реальные пользователи, которые пользуются скринридерами, навигируют с клавиатуры или имеют ограничения по зрению.

Что проверять в каждом хедере:

  • Семантика. Шапка обёрнута в `<header>`, навигация — в `<nav>`. Скринридер должен понимать структуру.
  • Клавиатурная навигация. Все пункты меню должны быть доступны через Tab. Активный пункт — иметь видимый `:focus`-стиль.
  • ARIA-атрибуты. Бургер-кнопка — `aria-expanded="true/false"`, мобильное меню — `aria-hidden`. Это базовый минимум.
  • Контрастность. Текст в шапке должен иметь контраст не менее 4.5:1 (стандарт WCAG AA). Проверяется через DevTools или WebAIM Contrast Checker.

Как собирается хедер на практике: стек и процесс

Стек: React + TypeScript. Для стилей — CSS Modules или Tailwind, зависит от проекта. Для анимаций — Framer Motion или чистый CSS.

Структура компонента:

Header/
  ├── Header.tsx         // основной компонент
  ├── Logo.tsx           // логотип с ссылкой
  ├── Navigation.tsx     // десктопное меню
  ├── MobileMenu.tsx     // мобильное меню с бургером
  ├── ContactInfo.tsx    // контакты (если нужны)
  └── Header.module.css  // стили

Каждый элемент — отдельный компонент. Это упрощает тестирование и переиспользование.

Логика фиксированной шапки:

Используется хук `useScrollDirection`, который отслеживает направление скролла. При скролле вниз — шапка скрывается, вверх — появляется. На десктопе — остаётся всегда видимой (или трансформируется в компактную версию).

Тестирование:

После верстки обязательно проверяется:

  • Chrome DevTools → Lighthouse → Accessibility
  • Ручная проверка Tab-навигации
  • Проверка на реальных устройствах (iPhone, Android, iPad)
  • Проверка в Safari — этот браузер любит подкидывать сюрпризы с `position: sticky` и `backdrop-filter`

Частые ошибки, которые встречаются на проектах

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

Логотип без ссылки на главную. Кажется, что это мелочь, но пользователь на автомате кликает по логотипу, чтобы вернуться на главную. Если ничего не происходит — это сбой ожидания.

Шапка не адаптируется к длинным названиям. Когда пункт меню на русском длиннее, чем предполагал дизайнер, и текст уезжает за пределы блока. Всегда тестируйте с реальными текстами, а не с «Lorem ipsum».

Z-index войны. Шапка фиксированная, но модальное окно открывается — и оказывается под хедером. Или наоборот, выпадающее меню прячется за слайдером. Решение: продумайте систему z-index заранее. Рекомендуется использовать переменные: `--z-header: 100; --z-dropdown: 110; --z-modal: 200; --z-overlay: 150;`.

Хедер без `will-change` и `transform: translateZ(0)`. Если шапка фиксированная и в ней есть blur-эффект — без этих свойств на некоторых устройствах будут подтормаживания при скролле.

Нет прелоадера для шрифта в шапке. Текст меню «прыгает» при загрузке, меняя высоту и ширину символов. Это раздражает и создаёт CLS.

Вместо итогов

Хорошая шапка сайта — это та, которую пользователь не замечает. Он просто находит нужное за секунду и идёт дальше. Плохая шапка — это та, которая заставляет думать, искать и раздражаться.

Если вы проектируете хедер — начните с вопросов: кто ваш пользователь, что он ищет в первые секунды, и на каком устройстве он чаще всего заходит. Ответы на эти три вопроса дадут вам 80% решений.

Остальные 20% — это детали: микроанимации, типографика, производительность. Но именно детали отличают «нормальный» сайт от того, на который хочется вернуться.