Проблема стандартного меню при большом каталоге
Отметим: когда в каталоге больше 50 разделов, а навигация — старый <ul> с выпадающим списком, посетитель не видит подкатегории, кликает наугад, конверсия падает на 20–30%. Стандартный dropdown упирается в ограничения: одна колонка, нет места для изображений и описаний, на тач-устройствах hover-логика ломается, отсутствует клавиатурное управление. Выход — мега-меню (mega menu): панель с 4–6 колонками, изображениями и описаниями. Оно даёт контекст и ускоряет поиск товара в 2 раза.
Наша команда с 7-летним опытом в создании сложной навигации реализовала более 30 проектов с мега-меню для e-commerce площадок. Мы используем современный стек: React 18, Next.js 14, TypeScript. В статье разберём архитектуру компонента, требования доступности согласно WCAG 2.1 Success Criterion 2.4.3 Focus Order и мобильную адаптацию.
Когда обычный dropdown перестаёт работать
Стандартный выпадающий список имеет жёсткие ограничения:
- одна колонка — невозможно группировать по категориям;
- нет места для вспомогательного контента (изображения, описания, промо);
- на тач-устройствах hover-логика ломается;
- управление с клавиатуры отсутствует или реализовано наспех.
Мега-меню решает эти проблемы за счёт другой модели раскрытия и разметки. Мы гарантируем, что ваш проект получит удобную навигацию.
Архитектура компонента
Типичная структура мега-меню состоит из трёх слоёв:
Триггеры верхнего уровня — горизонтальная навигационная полоса. Каждый пункт — кнопка с aria-expanded и aria-controls. Панель — <div> с aria-labelledby, позиционированная на всю ширину. Внутри — CSS Grid или Flexbox с колонками. Контент — группы ссылок, изображения, CTA.
<nav aria-label="Основная навигация">
<ul class="mega-nav">
<li>
<button aria-expanded="false" aria-controls="panel-catalog" class="mega-nav__trigger">
Каталог
</button>
<div id="panel-catalog" class="mega-panel" hidden>
<div class="mega-panel__grid">
<section aria-labelledby="group-electronics">
<h3 id="group-electronics">Электроника</h3>
<ul>
<li><a href="/catalog/phones">Смартфоны</a></li>
<li><a href="/catalog/laptops">Ноутбуки</a></li>
</ul>
</section>
</div>
</div>
</li>
</ul>
</nav>
Реализация на React
В React-проектах мега-меню удобно управлять через контекст и useReducer. Анимации — через Framer Motion или CSS-трансформации. Вот базовый компонент с закрытием по клику вне меню и по Escape:
const MegaMenu = () => {
const [activePanel, setActivePanel] = useState<string | null>(null);
const containerRef = useRef<HTMLElement>(null);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
setActivePanel(null);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') setActivePanel(null);
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, []);
return (
<nav ref={containerRef} aria-label="Основная навигация">
{navItems.map((item) => (
<MegaNavItem
key={item.id}
item={item}
isOpen={activePanel === item.id}
onToggle={() => setActivePanel(activePanel === item.id ? null : item.id)}
/>
))}
</nav>
);
};
В Next.js с SSR учитывайте, что hidden атрибут должен обрабатываться корректно на сервере, чтобы избежать layout shift при гидрации.
Как обеспечить доступность (WCAG 2.1 AA)?
Это самая частая проблема в наших проектах — её игнорируют, а зря. Конкретные требования:
| Паттерн | Реализация |
|---|---|
| Открытие по Enter/Space | onKeyDown с проверкой `key === 'Enter' |
| Навигация стрелками | roving tabindex или aria-activedescendant |
| Закрытие по Escape | глобальный обработчик |
| Фокус при закрытии | возврат на триггер через triggerRef.current?.focus() |
| Скрытие от screen reader | hidden или aria-hidden="true" на закрытой панели |
Библиотека @radix-ui/react-navigation-menu реализует большинство этих требований из коробки и является предпочтительной базой в React-стеке. Она использует паттерн NavigationMenu.Root + List + Item + Trigger + Content. Наш опыт показывает, что это ускоряет разработку на 30%.
Как проверить доступность мега-меню?
Вот пошаговая инструкция для тестирования:
- Откройте меню с клавиатуры — нажмите Tab до триггера, затем Enter или Space. Убедитесь, что панель раскрывается и фокус переходит внутрь.
- Используйте стрелки вправо/влево для переключения между триггерами. Панель должна переключаться.
- Нажмите Escape — панель закроется, фокус вернётся на триггер.
- Проверьте screen reader (NVDA, VoiceOver): объявляется ли
aria-expanded,aria-controls,aria-labelledby. - Убедитесь, что закрытая панель невидима для screen reader (атрибут
hiddenилиaria-hidden="true").
Что входит в нашу работу
Передаём документацию по компоненту, настроенные доступы к репозиторию, unit-тесты для ключевых сценариев, примеры использования. Обучаем команду работе с компонентом. Оказываем поддержку 2 недели после сдачи. Вы получаете гарантию, что меню работает в трёх последних версиях Chrome, Firefox, Safari и Edge.
Мобильная версия
На мобильных устройствах мега-меню трансформируется в аккордеон. Это отдельный компонент, не адаптированный десктопный. Breakpoint-логика в CSS:
@media (max-width: 1024px) {
.mega-panel {
position: static;
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
transition: grid-template-rows 0.3s ease;
}
.mega-panel[data-open="true"] {
grid-template-rows: 1fr;
}
}
Трюк с grid-template-rows: 0fr → 1fr анимирует высоту без фиксированного значения — это лучше JavaScript-измерений в 2 раза по производительности.
Позиционирование панели
Два подхода:
- Full-width — панель по всей ширине, привязана к нижней границе меню. Часто в e-commerce.
- Flyout — у конкретного триггера. Используйте Floating UI для расчёта позиции и flip-логики.
Таблица сравнения:
| Характеристика | Full-width | Flyout |
|---|---|---|
| Занимаемая площадь | Вся ширина экрана | Только под триггером |
| Подходит для | Более 20 разделов в структуре | Менее 10 разделов |
| Сложность реализации | Средняя | Выше (расчёт позиции) |
Почему производительность важна?
Панели содержат много DOM-узлов. Если данные динамические, применяйте ленивую загрузку:
const [mounted, setMounted] = useState(false);
const handleOpen = () => {
if (!mounted) setMounted(true);
setIsOpen(true);
};
return (
<div>
<button onClick={handleOpen}>Каталог</button>
{mounted && <div hidden={!isOpen}>...</div>}
</div>
);
Технические детали анимации
Для скрытых секций используйте content-visibility: auto — это экономит ресурсы браузера. При открытии панели с динамическим контентом загружайте данные только при первом открытии (mount-on-interaction).
Сроки и стоимость
Стоимость рассчитывается индивидуально после оценки проекта. Ориентировочные сроки:
- Статическое мега-меню (фиксированные ссылки, мобильный аккордеон) — 3–5 дней.
- Динамическое меню с загрузкой из CMS/API, полной доступностью и анимациями — 7–10 дней.
- Интеграция в существующую дизайн-систему с тестами — добавить 2–3 дня.
Средняя стоимость реализации — от 200 000 до 600 000 ₽. Экономия на доработках после сдачи может составить до 100 000 ₽.
Свяжитесь с нами для точной оценки вашего проекта — мы проанализируем структуру каталога и предложим оптимальное решение. Закажите разработку мега-меню и получите консультацию инженера.