Выбор навигации: sidebar / tabs / breadcrumbs / mega-menu

Действуй как information architect. Задача — подобрать комбинацию навигационных паттернов, а не выбрать один. Хорошая навигация — это часто 2-3 уровня, работающих вместе: глобальная + локальная + контекстная.

IA: {{ia}} Persona: {{primary_persona}} Масштаб: {{scale}}

6 паттернов — что они делают и что нет

Карта выбора (стартовая, не догма)

По масштабу

• Small (1-5 экранов): top nav + footer. Sidebar пока избыточен.
• Medium (10-30): top nav для топ-3 + sidebar для рабочих экранов. ИЛИ sidebar один для всего, если все экраны — рабочие.
• Large (30+): sidebar (раскрывающийся) + breadcrumbs + tabs внутри страниц. Top nav только если есть переключение продуктов.
• Enterprise / каталог: top nav с mega-menu + facets / filters как навигация по контенту.

По persona

• Гость / новичок: top nav. Sidebar пугает. Нужны очевидные «3 двери».
• Опытный (использует каждый день): sidebar с keyboard-shortcuts. Сворачиваемый, чтобы экономить ширину.
• Администратор: sidebar с группировкой («Управление», «Настройки», «Аудит»). Часто два sidebar'а (главный + settings внутри).

По глубине IA

• 1 уровень (плоская): один паттерн (top или side).
• 2 уровня: sidebar + tabs внутри, ИЛИ top + sidebar.
• 3+ уровня: sidebar (со sticky-категориями) + breadcrumbs + tabs. Без breadcrumbs юзер теряется на 3-м уровне.

Что сделать

Шаг 1. Опиши IA как дерево

Не «13 экранов в куче», а:

Workspace (top level)
├── Projects
│   ├── List
│   ├── Detail
│   │   ├── Overview
│   │   ├── Tasks
│   │   └── Settings
├── Team
└── Billing

Шаг 2. Подбери комбинацию

Минимум 2 паттерна. Опиши:

• Какой паттерн отвечает за уровень 1 (top nav / sidebar)
• Какой за уровень 2 (sidebar секции / tabs / nested sidebar)
• Какой за уровень 3+ (breadcrumbs + tabs)

Шаг 3. Конфликты

Проверь и исключи:

• Двойная глобальная nav: top nav + sidebar с теми же пунктами — выбирай одно.
• Tabs внутри tabs: второй уровень tabs читается как мусор. Используй sub-page route.
• Breadcrumbs при 2-уровневой иерархии: избыточно, выглядит как PR-имитация структуры.
• Mega-menu на 5 пунктов: не оправдано. Простой top nav лучше.

Шаг 4. Mobile

Для каждого паттерна:

• Top nav → hamburger, drawer-меню. Главные 3-5 ссылок могут остаться bottom-bar на mobile.
• Sidebar → drawer, открывается по hamburger. Запоминай состояние свёрнут/раскрыт.
• Tabs → горизонтальный скролл с indicator. Если >5 tabs — пересмотри (это уже не tabs).
• Breadcrumbs → только последние 2 уровня + «...» для предыдущих.

Шаг 5. Поведение

• Active state: чёткий, контрастный. Не just bold — full pill/highlight.
• Hover state: показывает, что элемент кликабелен.
• Keyboard nav: Tab по элементам, Enter — переход. Sidebar — Cmd+B для toggle.
• URL persistence: tabs обязаны быть в URL (/projects/123?tab=settings). Без этого share-link ломается.

Формат вывода

IA-дерево

Markdown / ASCII tree.

Решение

Одна строка: «<top nav + sidebar + tabs> — потому что <причина>».

Распределение по уровням

Mobile-адаптация

Для каждого паттерна — что меняется на 375px.

Spec по поведению

• Active state:
• Hover:
• Keyboard:
• URL:
• Persistence (collapsed/expanded):

Что отбросили и почему

Альтернатива, которую не взяли + причина.

Anti-patterns (НЕ делать)

• ❌ Один sidebar глубиной 5 уровней с раскрывашками внутри раскрывашек. После 2-го уровня — переходи на отдельную страницу.
• ❌ Top nav, sidebar и breadcrumbs с одинаковыми названиями. Один источник правды на уровень.
• ❌ Mega-menu для продукта на 8 экранов. Это маркетинговый паттерн, не интерфейсный.
• ❌ Tabs без URL. Юзер не может зашерить вкладку «Settings» — только верхний уровень.
• ❌ Скрытый hamburger на desktop. На больших экранах есть место — покажи nav.
• ❌ Breadcrumbs без последнего «current» элемента. Юзер не понимает где он.
• ❌ Bottom-bar на desktop. Это mobile-паттерн. На desktop bottom-bar смотрится как глюк.
• ❌ Меню на hover без задержки и без keyboard-эквивалента. Случайный hover открывает мега-меню — раздражение.