Menu

Компонент Menu в Chakra UI предназначен для создания выпадающих меню с различными уровнями вложенности и интерактивными элементами. Он полностью управляемый, поддерживает клавиатурную навигацию и адаптируется под различные экраны, обеспечивая высокую доступность (accessibility).

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

Компонент состоит из нескольких ключевых частей:

  1. Menu – контейнер, который оборачивает все элементы меню.
  2. MenuButton – кнопка, которая открывает или закрывает меню.
  3. MenuList – контейнер для всех элементов меню, отображается при открытии.
  4. MenuItem – отдельный пункт меню.
  5. MenuDivider – разделитель между пунктами меню.
  6. MenuGroup – логическая группа пунктов меню с заголовком.
  7. MenuOptionGroup и MenuItemOption – позволяют создавать группы опций с выбором одного или нескольких элементов (radio или checkbox).

Простейший пример:

import { Menu, MenuButton, MenuList, MenuItem, Button } from "@chakra-ui/react";

<Menu>
  <MenuButton as={Button} colorScheme="blue">
    Открыть меню
  </MenuButton>
  <MenuList>
    <MenuItem>Пункт 1</MenuItem>
    <MenuItem>Пункт 2</MenuItem>
    <MenuItem>Пункт 3</MenuItem>
  </MenuList>
</Menu>

Настройка MenuButton

MenuButton можно стилизовать как обычную кнопку Chakra UI. Он поддерживает свойства as, variant, size, colorScheme и другие.

Пример с иконкой и кастомной кнопкой:

import { Menu, MenuButton, MenuList, MenuItem, Button, ChevronDownIcon } from "@chakra-ui/react";

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />} colorScheme="teal">
    Опции
  </MenuButton>
  <MenuList>
    <MenuItem>Редактировать</MenuItem>
    <MenuItem>Удалить</MenuItem>
  </MenuList>
</Menu>

Группировка и разделители

Для логического разделения элементов используется MenuGroup и MenuDivider. Это полезно для создания категорий внутри меню.

<Menu>
  <MenuButton as={Button}>Меню</MenuButton>
  <MenuList>
    <MenuGroup title="Файлы">
      <MenuItem>Создать</MenuItem>
      <MenuItem>Открыть</MenuItem>
    </MenuGroup>
    <MenuDivider />
    <MenuGroup title="Правка">
      <MenuItem>Копировать</MenuItem>
      <MenuItem>Вставить</MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>

Опции с выбором

MenuOptionGroup позволяет создавать радиокнопки или чекбоксы внутри меню:

<Menu>
  <MenuButton as={Button}>Выбор цвета</MenuButton>
  <MenuList>
    <MenuOptionGroup defaultValue="red" title="Цвет" type="radio">
      <MenuItemOption value="red">Красный</MenuItemOption>
      <MenuItemOption value="blue">Синий</MenuItemOption>
      <MenuItemOption value="green">Зеленый</MenuItemOption>
    </MenuOptionGroup>
  </MenuList>
</Menu>
  • type="radio" – только один пункт может быть выбран.
  • type="checkbox" – позволяет выбрать несколько элементов.

Контроль состояния Menu

Компонент поддерживает контролируемое открытие через isOpen, onOpen и onClose:

import { useDisclosure, Menu, MenuButton, MenuList, MenuItem, Button } from "@chakra-ui/react";

const { isOpen, onOpen, onClose } = useDisclosure();

<Menu isOpen={isOpen}>
  <MenuButton as={Button} onCl ick={onOpen}>Меню</MenuButton>
  <MenuList>
    <MenuItem onCl ick={onClose}>Пункт 1</MenuItem>
    <MenuItem onCl ick={onClose}>Пункт 2</MenuItem>
  </MenuList>
</Menu>

Это позволяет интегрировать меню с логикой приложения и управлять его состоянием программно.

Вложенные меню (SubMenu)

Chakra UI поддерживает создание вложенных меню, используя комбинацию Menu внутри MenuItem:

<Menu>
  <MenuButton as={Button}>Главное меню</MenuButton>
  <MenuList>
    <MenuItem>Основной пункт</MenuItem>
    <Menu>
      <MenuItem>Пункт с подменю
        <MenuList>
          <MenuItem>Подпункт 1</MenuItem>
          <MenuItem>Подпункт 2</MenuItem>
        </MenuList>
      </MenuItem>
    </Menu>
  </MenuList>
</Menu>

Адаптивность и доступность

  • Меню автоматически поддерживает клавиатурную навигацию: стрелки вверх/вниз для выбора пунктов, Enter для выбора, Escape для закрытия.
  • Компонент использует aria атрибуты для корректной работы с экранными читалками.
  • Меню корректно позиционируется относительно кнопки с помощью Popper.js, обеспечивая правильное отображение даже при ограниченном пространстве.

Стилизация MenuList и MenuItem

Все элементы меню можно кастомизировать с помощью стандартных Chakra UI свойств:

<MenuList bg="gray.50" borderColor="gray.200">
  <MenuItem _hover={{ bg: "teal.100" }} _focus={{ bg: "teal.200" }}>
    Пункт 1
  </MenuItem>
  <MenuItem _active={{ bg: "teal.300" }}>Пункт 2</MenuItem>
</MenuList>
  • _hover – стили при наведении мыши
  • _focus – стили при фокусе клавиатурой
  • _active – стили при нажатии

Итоговые возможности Menu

  • Простое и вложенное меню с управлением состоянием
  • Группировка пунктов и разделители
  • Опции с выбором (radio и checkbox)
  • Полностью управляемое и контролируемое состояние
  • Адаптивность и доступность
  • Гибкая стилизация с использованием системных props Chakra UI

Компонент Menu является мощным инструментом для создания интерактивных и доступных выпадающих меню в React-приложениях на базе Chakra UI. Он сочетает простоту использования с высокой кастомизацией и поддержкой сложных сценариев интерфейса.

Оглавление