Элементы подменю

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

Radix UI реализует подменю через отдельные компоненты, сохраняя при этом единый API и подход к доступности, включая управление фокусом и клавиатурную навигацию.

Основные компоненты подменю

  1. Submenu Контейнер для вложенных элементов меню. Определяет область, в которой будет открываться подменю.

    import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Меню</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Элемент 1</DropdownMenu.Item>
    <DropdownMenu.Sub>
      <DropdownMenu.SubTrigger>Подменю</DropdownMenu.SubTrigger>
      <DropdownMenu.SubContent>
        <DropdownMenu.Item>Подэлемент 1</DropdownMenu.Item>
        <DropdownMenu.Item>Подэлемент 2</DropdownMenu.Item>
      </DropdownMenu.SubContent>
    </DropdownMenu.Sub>
    <DropdownMenu.Item>Элемент 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

  2. SubTrigger Элемент, который инициирует открытие подменю. Может реагировать на наведение мыши, клик или фокус с клавиатуры.

    Особенности:

    • Поддержка стрелок навигации (ArrowRight/ArrowLeft) для открытия и закрытия подменю.
    • Состояния hover, focus и active обрабатываются автоматически.

  3. SubContent Контент подменю, который отображается при активации SubTrigger. Ключевые параметры:

    • sideOffset — отступ от родительского элемента.
    • align — выравнивание подменю относительно триггера (start, end, center).
    • collisionPadding — минимальное расстояние до края экрана для автоматической коррекции позиции.

Управление доступностью

Radix UI подменю обеспечивает поддержку ARIA-атрибутов:

  • aria-haspopup="menu" для триггеров подменю.
  • Автоматическая установка aria-expanded в зависимости от состояния.
  • Перемещение фокуса между родительским меню и подменю при навигации с клавиатуры.

Встроенные функции управления фокусом:

  • При открытии подменю фокус автоматически перемещается на первый элемент внутри.
  • Закрытие подменю с клавиши Escape возвращает фокус к SubTrigger.

Настройка анимации и стилизации

SubContent можно анимировать с помощью CSS-переходов или библиотек типа framer-motion. Radix UI предоставляет возможность:

  • Использовать классы для состояния open, closed.
  • Передавать пропсы className и style для индивидуальной стилизации.
  • Настраивать анимацию открытия и закрытия, например, плавное смещение или изменение прозрачности.
<DropdownMenu.SubContent
  sideOffset={5}
  align="start"
  className="submenu-content"
>
  ...
</DropdownMenu.SubContent>

CSS для анимации:

.submenu-content {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.2s, transform 0.2s;
}

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

Вложенные подменю

Radix UI поддерживает неограниченное количество уровней вложенности. Для создания вложенного подменю внутри подменю используется та же структура Sub → SubTrigger → SubContent.

Рекомендации по дизайну:

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

Обработка событий и интеграция с логикой

Подменю поддерживают все стандартные события Radix UI:

  • onOpenChange — реагирует на открытие/закрытие подменю.
  • onSelect — срабатывает при выборе элемента.
  • onPointerEnter / onPointerLeave — для кастомной навигации при наведении.

Эти события позволяют интегрировать подменю с глобальным состоянием приложения или внешними библиотеками управления состоянием, такими как Redux или Zustand.

Практические советы

  • Использовать SubTrigger с явными индикаторами наличия подменю (стрелка, иконка).
  • Минимизировать количество элементов в одном подменю для удобства навигации.
  • При кастомной стилизации сохранять видимость фокуса и контраст для доступности.
  • Проверять поведение подменю на разных устройствах и при разных способах навигации (клавиатура, тачскрин).

Элементы подменю Radix UI позволяют создавать мощные, доступные и легко управляемые интерфейсы с множеством уровней вложенности, полностью совместимые с современными стандартами веб-доступности и практиками UX.

Оглавление