Menu и MenuItem

Компоненты Menu и MenuItem из библиотеки MUI предназначены для создания выпадающих меню в интерфейсе. Menu представляет собой контейнер, который отображается поверх основного контента, а MenuItem — отдельные элементы внутри этого контейнера.

Подключение и базовая структура

Для работы с меню необходимо импортировать соответствующие компоненты из MUI:

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Button from '@mui/material/Button';

Типичный паттерн использования выглядит следующим образом: кнопка открывает меню, а элементы меню реагируют на действия пользователя.

function SimpleMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    

      
      
        Пункт 1
        Пункт 2
        Пункт 3
      
    

  );
}

Ключевые моменты:

  • anchorEl определяет элемент, относительно которого позиционируется меню.
  • open принимает булево значение, отвечающее за видимость меню.
  • onClose вызывается при закрытии меню, например, при клике вне его области.

Управление положением меню

Параметры Menu позволяют гибко настраивать позиционирование:

  • anchorOrigin — точка на элементе якоря, относительно которой будет располагаться меню.
  • transformOrigin — точка на самом меню, которая будет совмещена с anchorOrigin.

Пример:

Такое позиционирование обеспечивает точное управление расположением выпадающего меню на экране.

Вложенные и групповые элементы

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


  Настройки


  Профиль
  Безопасность

Использование свойства aria-haspopup="true" повышает доступность для пользователей с технологиями вспомогательного чтения.

Интеграция с иконками и кастомный стиль

MenuItem поддерживает вложенные компоненты, такие как Icon, ListItemIcon, и ListItemText, что позволяет создавать меню с визуальными индикаторами:

import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/Inbox';


  
    
  
  Входящие

Для кастомизации стилей можно использовать sx или styled-компоненты MUI:


  Пункт с кастомным стилем

Управление событиями и взаимодействием

MenuItem реагирует на события onClick, onMouseEnter, onMouseLeave и другие стандартные события React. Это позволяет интегрировать меню с логикой приложения:

  • onClick — закрытие меню и выполнение действия.
  • onMouseEnter / onMouseLeave — подсветка или открытие вложенного меню при наведении.
  • disabled — блокировка элемента для предотвращения выбора.

  Недоступный пункт

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

MUI автоматически поддерживает навигацию с клавиатуры:

  • Стрелки вверх/вниз для выбора пункта.
  • Enter для активации.
  • Esc для закрытия меню.

Для улучшения доступности можно добавить aria-label и aria-labelledby, а также правильно использовать aria-haspopup и aria-controls для вложенных меню.

Итоговые рекомендации

  • Menu и MenuItem обеспечивают гибкое создание интерактивных меню с поддержкой клавиатуры и доступности.
  • Использование anchorEl, anchorOrigin, transformOrigin позволяет управлять расположением меню.
  • Вложенные меню и кастомные элементы помогают создавать сложные и визуально насыщенные интерфейсы.
  • Стилизация через sx или styled-компоненты позволяет интегрировать меню в любой дизайн системы.
Оглавление