Паттерны навигационного дизайна: 9 вариантов меню для веба и мобильных устройств

Навигация — это не меню. Это обещание о том, где живут нужные вещи. Когда она работает, пользователи перемещаются по продукту, не задумываясь. Когда не работает — уходят.

Пользователи не читают навигацию. Они просматривают её, доверяют ей и замечают только тогда, когда она ломается.

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

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

---

Для чего навигация на самом деле нужна

Навигация отвечает на один вопрос пользователя: куда я могу отсюда попасть? Ответьте чётко — и человек двигается. Заставьте искать — и он уйдёт.

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

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

---

Горизонтальная навигационная панель

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

Neon (neon.tech) делает это идеально. Логотип слева, основные ссылки по центру, кнопки входа и CTA справа. Ничего спрятанного, никаких вложений, ноль когнитивной нагрузки. В лучшем виде top bar рассказывает всю историю структуры сайта в одной строке, не требуя никакого взаимодействия.

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

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

---

Hamburger menu

Hamburger menu (три стопки линий, открывающих drawer или оверлей по тапу) прячет навигацию за одним дополнительным взаимодействием. Он экономит место на экране. И при этом делает каждый раздел вашего продукта менее обнаруживаемым.

Исследования на эту тему однозначны. NNGroup выяснила, что навигация с вкладками на мобильном стабильно превосходит hamburger menus по обнаруживаемости и показателям выполнения задач. Когда вы прячете навигацию, люди используют её реже. Элементы за hamburger воспринимаются как менее приоритетные, потому что визуально они и являются таковыми.

Это не делает hamburger неправильным. Это делает его компромиссом. Для сайтов с глубокими разделами, к которым обращаются редко, компромисс приемлем. Для приложений, которые открывают ежедневно, — обычно нет.

Instagram попробовал убрать основную навигацию за hamburger и сдал назад, переместив основные разделы в нижний tab bar. Урок очевиден: используйте hamburger для вторичных путей, настроек и редко посещаемых мест. Никогда не используйте его для действий, ради которых человек открыл продукт.

---

Постоянный sidebar

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

Документация Tailwind CSS использует его именно так. Левый sidebar содержит все разделы документации, сгруппированные и скроллируемые, а контент занимает оставшуюся ширину. Пользователи всегда знают, где находятся, куда могут пойти и как устроено всё информационное пространство. Это пространственное осознание — суть паттерна в глубоких справочных материалах, где люди постоянно прыгают между разделами.

Slack, Notion и Figma используют постоянные sidebars на уровне приложения по той же причине. Sidebar — это карта. Убрать его значило бы заставлять пользователей перестраивать ментальную модель при каждом навигационном действии, а это издержки, которые не стоит на них возлагать.

Стоимость — горизонтальное пространство экрана. На 13-дюймовом ноутбуке постоянный sidebar занимает 250-300 пикселей от области контента. На мобильном ему нет места вообще.

Адаптивные sidebars сворачиваются в drawer или hamburger на маленьких экранах, снова порождая те же проблемы с обнаруживаемостью, которых вы хотели избежать. Подключите его к токенам, которые обеспечивают единообразие навигации с самого начала, иначе будете патчить это позже.

---

Нижний tab bar

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

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

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

В 2026 году нижний tab bar — дефолт для любого продукта, который открывают хотя бы раз в день на мобильном. Если вы проектируете потребительское мобильное приложение или mobile-first progressive web app и не используете нижний bar, вам нужна конкретная причина не делать этого. «Мы сначала проектировали для десктопа» — не та причина.

---

Mega menu

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

Amazon использует его в крайнем варианте под меню «Все». Десятки категорий с подкатегориями, организованные в колонки и группы, все видны в одной панели. Паттерн работает под давлением каталога, потому что открывает глубину без необходимости кликать вниз по иерархии. Всё можно просмотреть с одного взгляда.

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

Mega menus также не работают на плоских сайтах. Двенадцать страниц не оправдывают mega menu. Паттерн подразумевает сложность, которую нужно заслужить реальной глубиной контента, а не оптимизмом насчёт будущего роста.

---

Breadcrumbs

Breadcrumbs показывают путь от главной страницы до текущей: Главная > CSS > Grid. Это не основная навигация. Это навигация ориентации, и она выполняет точную функцию.

MDN использует breadcrumbs на каждой справочной странице. Когда вы попадаете на документацию по CSS grid из поиска Google, цепочка breadcrumbs мгновенно сообщает, что эта страница находится внутри CSS, который находится внутри References. Этот контекст сворачивает трёхуровневую иерархию в одну строку, не требующую никакого взаимодействия для понимания.

Breadcrumbs бесполезны на плоских сайтах. Если весь ваш продукт имеет глубину в два уровня, breadcrumbs добавляют визуальный шум без какой-либо пользы для ориентации. Они оправдывают себя на документационных сайтах, иерархиях e-commerce вроде Главная > Мужское > Куртки > Водонепроницаемые, и на любом сайте, где пользователи регулярно попадают глубоко через поиск.

Они дополняют другие паттерны, а не заменяют их. Breadcrumbs располагаются над контентом, дополняя top bar или sidebar. Для более подробных разборов веб- и UI-дизайна действует та же логика: вторичные навигационные элементы должны поддерживать основной паттерн, а не конкурировать с ним.

---

Command palette

Command palette — это оверлей, вызываемый с клавиатуры (как правило, через Cmd+K или Ctrl+K), который принимает текстовый ввод и возвращает ранжированные действия, навигационные цели и результаты поиска. Linear, Raycast, Slack и Figma поставляют её как полноценную навигационную поверхность.

В 2026 году command palette перешла из разряда трюков для опытных пользователей в основной навигационный механизм серьёзного продуктивного ПО. Cmd+K в Linear доводит до любого issue, проекта или действия в рабочем пространстве за секунды. Raycast построен почти целиком вокруг этого паттерна. Эти продукты рассматривают набранное намерение как более прямой путь, чем любая иерархия меню, — и для людей с клавиатурными привычками это действительно так.

Режим отказа — невидимость. Пользователи, которые не знают о существовании шортката, никогда не обнаружат его в процессе исследования. Command palettes не могут заменить видимую навигацию для новых пользователей или тех, у кого нет клавиатурных привычек. Продукты, скрывающие всю навигацию за Cmd+K, оставляют каждого нового пользователя без ориентиров.

Правильное использование — дополнение, не замена. Запускайте command palette рядом с sidebar или top bar. Дайте клавиатурным пользователям обходить меню полностью. Остальным дайте возможность визуальной навигации. Оба пути должны существовать.

---

Sticky и shrinking headers

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

Оба паттерна сохраняют доступность навигации на длинных страницах, не требуя прокрутки обратно вверх. На насыщенных контентом страницах это реальное улучшение удобства. GitHub использует sticky header на страницах репозиториев, чтобы основная навигация, поиск и контекст репозитория всегда были в поле зрения при прокрутке issues, кода и обсуждений.

Стоимость — вертикальное пространство экрана. Sticky header высотой 60-70 пикселей занимает эту высоту при каждой позиции скролла. На планшете с экраном в 768 пикселей это почти 10 процентов viewport, постоянно занятых навигацией. Shrinking headers возвращают часть этого, уменьшаясь примерно до 40 пикселей после скролла, но требуют тщательной реализации, чтобы выглядеть намеренно, а не сломанно.

Избегайте sticky headers на коротких страницах, где пользователь быстро достигает дна. Паттерн оправдывает себя на длинных, насыщенных контентом страницах, где возврат вверх потребовал бы значительной прокрутки.

---

Fat footer

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

Tailwind CSS, Stripe и большинство маркетинговых SaaS-сайтов используют fat footers с четырьмя-шестью колонками, охватывающими ссылки на продукт, документацию, корпоративные страницы, юридические документы и социальные сети. Они ничего не стоят с точки зрения высоты viewport в основном контентном опыте и предоставляют удобную карту для пользователей, достигших дна в поисках чего-то конкретного.

Fat footers важнее для SEO, чем для живой навигации. Каждая ссылка в fat footer — это путь для обхода краулером. Они один из главных способов, которыми поисковые системы обнаруживают вторичные и третичные страницы сайта. С точки зрения чистого удобства, большинство пользователей никогда не скроллят до футера, но те, кто всё же это делает, заняты целенаправленным поиском.

Пропускайте fat footer внутри авторизованных продуктовых сессий. Notion не показывает вам маркетинговый футер внутри редактора. Паттерн принадлежит маркетинговым сайтам и документационным хабам, где анонимные и новые пользователи свободно просматривают контент.

---

Как выбрать правильный паттерн

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

Комбинирование паттернов — норма и ожидаемое поведение. Большинство серьёзных продуктов используют два-три. Документация Tailwind CSS использует top bar для навигации по сайту, постоянный sidebar для навигации по документации и breadcrumbs для ориентации на уровне страницы. Эти три паттерна одновременно обслуживают три разных уровня навигационной иерархии без пересечений.

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

---

Навигационные ошибки, которые тихо убивают удобство

Скрытие основных действий в hamburger menu. Если пользователям нужна функция ежедневно, она не может жить за дополнительным тапом. Измерьте CTR самого hamburger. Если он ниже 30 процентов, пути внутри невидимы для большинства ваших пользователей.

Непоследовательные лейблы на разных поверхностях. «Insights» на дашборде, «Reports» в онбординговом письме, «Analytics» в справочной документации — и всё это ведёт к одному месту. Навигация — это словарь. Каждый синоним — это вопросительный знак в ментальной модели пользователя.

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

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

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

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

---

FAQ

Какой навигационный паттерн наиболее распространён в вебе?

Горизонтальная навигационная панель наверху — самый распространённый паттерн для десктопных сайтов. Для мобильных приложений и продуктов, используемых ежедневно, стандартом стал нижний tab bar. Большинство реальных продуктов используют оба: top bar на десктопе и bottom bar на мобильном — поверх единой информационной архитектуры.

Когда стоит использовать hamburger menu?

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

Сколько элементов должно быть в навигационной панели?

Пять-семь — принятый потолок для горизонтального top bar, и пять для нижнего tab bar на мобильном. Больше этого количества — паттерн начинает ломаться: элементы теснятся, лейблы обрезаются, а сканирование обходится дороже, чем даёт.

Можно ли использовать несколько навигационных паттернов на одном сайте?

Не просто можно — нужно. Большинство реальных продуктов используют два-три паттерна, обслуживающих разные уровни навигационной иерархии. Документационные сайты часто сочетают top bar для навигации по сайту, постоянный sidebar для навигации по разделу и breadcrumbs для определения местоположения страницы.

Каждый паттерн обслуживает отдельный слой без пересечений. Ошибка — использовать несколько паттернов, конкурирующих, а не сотрудничающих.

Как навигация влияет на SEO?

Ссылки в top bar, sidebar и fat footer передают авторитет страниц и помогают поисковым системам обнаруживать и индексировать страницы. Breadcrumbs добавляют структурированные данные, которые могут выводить информацию о пути прямо в результатах поиска. Навигация — это часть вашей SEO-архитектуры, и относиться к ней нужно именно так с первого дня, а не патчить задним числом.

---

Перестаньте заставлять людей искать

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

Девять паттернов покрывают почти всё: top bar для маркетинговых сайтов и широких справочников, постоянный sidebar для глубоких инструментов и документации, нижний tab bar для ежедневно используемых мобильных приложений, mega menu для глубины каталога, breadcrumbs для иерархической ориентации, command palette для скоростных инструментов продуктивности, sticky headers для длинного контента, hamburger как фолбек для вторичных путей и fat footer как карта второго шанса для маркетинговых сайтов.

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

Изучайте больше разборов веб- и UI-дизайна на Brainy Papers или стройте рядом с сообществом создателей Brainy и совершенствуйте мастерство вместе с 2M+ дизайнерами, которым важно понимать основы правильно.