Навигация: хедер, меню и бургер

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

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

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

Адаптация навигации

  НАВИГАЦИЯ: DESKTOP -> MOBILE
  ----------------------------
  DESKTOP:
  [ Лого ]   Главная  Цены  Блог  [ Войти ]

  MOBILE (свёрнуто):     MOBILE (открыто):
  [ Лого ]      [ = ]    [ Лого ]      [ X ]
                         --------------------
                         Главная
                         Цены
                         Блог
                         [ Войти ]

Бургер — это <button>, а не div: его должно быть видно скринридеру и можно нажать с клавиатуры. Сообщаем состояние через aria-expanded:

<button class="burger" aria-expanded="false" aria-controls="menu">
  <span class="sr-only">Меню</span>
</button>
<nav id="menu" hidden>
  <a href="/">Главная</a>
  <a href="/pricing">Цены</a>
</nav>

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

.nav a { color: var(--color-text); }
.nav a:hover { color: var(--color-action); }
.nav a[aria-current="page"] {   /* текущая страница */
  font-weight: 600;
  border-bottom: 2px solid var(--color-action);
}
/* Sticky-шапка: всегда под рукой */
.header { position: sticky; top: 0; }

Разбор глубже: навигация как ответ на три вопроса

Любую навигацию можно проверить тремя вопросами пользователя: «где я сейчас?», «куда я могу пойти?», «как вернуться?». Если интерфейс не отвечает хотя бы на один из них, человек теряется. «Где я» решается подсветкой текущего пункта (визуально и через aria-current), хлебными крошками, заголовком. «Куда могу» — видимым, понятным набором пунктов. «Как вернуться» — логотипом-ссылкой на главную, кнопкой «назад», предсказуемой структурой. Красивое меню, которое не отвечает на эти вопросы, бесполезно.

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

Доступность навигации — место, где новички спотыкаются чаще всего, потому что визуально «всё работает». Бургер, собранный из div с обработчиком клика, выглядит как кнопка, но для скринридера он невидим, а с клавиатуры на него не перейти. Настоящий <button> получает фокус, нажимается пробелом и Enter и озвучивается как кнопка бесплатно. Атрибут aria-expanded сообщает незрячему пользователю, раскрыто меню или свёрнуто. Это не «дополнительная работа ради галочки» — это разница между сайтом, которым можно пользоваться без мыши и зрения, и сайтом, который для таких людей просто сломан.

Полезно учитывать и правило приоритета и пропадающего меню. Когда пунктов навигации больше, чем влезает, есть зрелый патторн «priority+»: видимые пункты остаются, а лишние сворачиваются под кнопку «Ещё». Это честнее бургера, потому что важное остаётся на виду, а прячется только хвост. Главный принцип любой навигации — иерархия важности: не все пункты равны, и интерфейс должен это отражать. Ключевые разделы — на виду и крупнее, служебные (политика, контакты) — в футере. Ровный список из пятнадцати одинаковых пунктов — это отказ дизайнера думать о приоритетах, переложенный на пользователя.

Как делают ПЛОХО

Бургер сделан из div без aria — скринридер его «не видит», с клавиатуры не нажать. Нет индикации текущей страницы. В меню 12 пунктов вперемешку — пользователь тонет. Меню открыто, но закрыть нечем.

Как делают ХОРОШО

Бургер — настоящая кнопка с aria-expanded и доступным именем. Текущая страница подсвечена (aria-current). Пунктов немного, они сгруппированы. Есть hover/focus-состояния и понятное закрытие.

Чек-лист

Бургер — button с aria-expanded и доступным именем.
Видна текущая страница (aria-current).
У ссылок есть hover и focus состояния.
Меню открывается и закрывается с клавиатуры.
Пунктов немного, они сгруппированы по смыслу.

Итог. Навигация отвечает «где я и куда идти». Бургер-кнопка с aria, подсветка текущей страницы и видимые состояния делают её понятной и доступной.