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

Radix UI предоставляет набор компонентов для создания доступных и гибких интерфейсов. Горизонтальная навигация является одной из ключевых частей пользовательских интерфейсов, обеспечивая удобный переход между разделами приложения. В основе лежат компоненты NavigationMenu, NavigationMenuList, NavigationMenuItem и NavigationMenuTrigger, которые позволяют создавать структурированные и интерактивные меню.

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

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

NavigationMenuList — блок для группировки элементов меню. Обычно содержит несколько NavigationMenuItem и располагается горизонтально по умолчанию.

NavigationMenuItem — отдельный элемент меню. Может быть простой ссылкой или иметь выпадающее подменю, если внутри присутствует NavigationMenuTrigger.

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

Пример базовой структуры

import * as NavigationMenu from '@radix-ui/react-navigation-menu';

function HorizontalNav() {
  return (
    <NavigationMenu.Root>
      <NavigationMenu.List>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="/home">Главная</NavigationMenu.Link>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Trigger>Сервисы</NavigationMenu.Trigger>
          <NavigationMenu.Content>
            <NavigationMenu.Link href="/services/design">Дизайн</NavigationMenu.Link>
            <NavigationMenu.Link href="/services/development">Разработка</NavigationMenu.Link>
          </NavigationMenu.Content>
        </NavigationMenu.Item>
        <NavigationMenu.Item>
          <NavigationMenu.Link href="/about">О нас</NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>
    </NavigationMenu.Root>
  );
}

Горизонтальное расположение элементов

По умолчанию NavigationMenu.List отображает элементы горизонтально. Для настройки внешнего вида можно использовать CSS или утилиты типа Tailwind:

.nav-list {
  display: flex;
  gap: 24px;
}

Или через Tailwind:

<NavigationMenu.List className="flex gap-6">

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

Выпадающие подменю и анимации

Подменю реализуется через NavigationMenuContent. Этот компонент может содержать как список ссылок, так и более сложные элементы. Для анимации раскрытия можно использовать библиотеку @radix-ui/react-animations или собственные CSS-переходы.

Пример с анимацией:

.nav-content {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-content[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
}

Управление состоянием

Radix UI скрывает внутреннюю сложность управления состоянием меню. Все открытые элементы отслеживаются через NavigationMenu.Root, а фокус автоматически перемещается между элементами при навигации с клавиатуры. Это повышает доступность и избавляет от необходимости ручной работы с состоянием открытых подменю.

Кастомизация внешнего вида

Компоненты Radix UI предоставляют минимальную стилизацию, оставляя полную свободу дизайнеру. Для горизонтальной навигации можно задать:

  • Цвет текста и фона
  • Отступы между элементами
  • Стиль подчеркивания активного элемента
  • Анимацию раскрытия подменю
  • Переходы при наведении или фокусе

Пример:

.nav-link {
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: underline;
}

Доступность и клавиатурная навигация

Radix UI обеспечивает правильное управление фокусом и поддерживает следующие сценарии:

  • Перемещение по элементам меню с помощью стрелок
  • Закрытие подменю при нажатии Esc
  • Поддержка навигации по вкладкам (Tab) между различными меню
  • Работа с экранными считывателями благодаря семантической разметке ARIA

Поддержка мобильных устройств

Для мобильной версии горизонтальная навигация часто превращается в вертикальный список или бургер-меню. Radix UI позволяет легко переключать компоненты без изменения логики управления состоянием:

<NavigationMenu.List className="flex flex-col md:flex-row gap-4">

Это обеспечивает адаптивность и сохранение интерактивности на любых экранах.

Резюме ключевых возможностей

  • Полностью доступная горизонтальная навигация
  • Простое создание подменю и триггеров
  • Гибкая кастомизация стилей и анимаций
  • Встроенное управление фокусом и состоянием
  • Адаптивное поведение для мобильных устройств

Эта система позволяет создавать сложные навигационные интерфейсы без дополнительных библиотек управления состоянием и без компромиссов по доступности.

Оглавление