Menu

Компонент Menu в Ant Design используется для создания навигационных панелей, боковых меню и сложных систем с вложенными пунктами. Он поддерживает горизонтальное и вертикальное расположение, многоуровневые подпункты, а также интеграцию с маршрутизацией в React-приложениях.

Импорт и базовое использование

Для начала работы с Menu требуется импортировать его из библиотеки:

import { Menu } from 'antd';

Базовая структура Menu состоит из Menu.Item и SubMenu:

<Menu mode="horizontal">
  <Menu.Item key="home">
    Главная
  </Menu.Item>
  <Menu.Item key="about">
    О нас
  </Menu.Item>
  <Menu.SubMenu key="services" title="Услуги">
    <Menu.Item key="web">Веб-разработка</Menu.Item>
    <Menu.Item key="mobile">Мобильные приложения</Menu.Item>
  </Menu.SubMenu>
</Menu>
  • mode – режим отображения: horizontal (горизонтальное), vertical (вертикальное), inline (вертикальное меню с выдвижением подпунктов).
  • key – уникальный идентификатор пункта, необходим для управления состоянием выбранного элемента.

Управление состоянием выбранного пункта

Menu поддерживает выделение активного элемента с помощью свойства selectedKeys:

const [current, setCurrent] = useState('home');

<Menu
  onCl ick={(e) => setCurrent(e.key)}
  selectedKeys={[current]}
  mode="horizontal"
>
  <Menu.Item key="home">Главная</Menu.Item>
  <Menu.Item key="about">О нас</Menu.Item>
</Menu>
  • onClick – обработчик выбора пункта меню, возвращающий объект с ключом выбранного элемента.
  • selectedKeys – массив ключей, соответствующих активным пунктам.

Подменю и вложенные пункты

Для создания многоуровневых меню используется SubMenu:

<Menu mode="inline">
  <Menu.SubMenu key="products" title="Продукты">
    <Menu.Item key="laptop">Ноутбуки</Menu.Item>
    <Menu.SubMenu key="phones" title="Смартфоны">
      <Menu.Item key="android">Android</Menu.Item>
      <Menu.Item key="ios">iOS</Menu.Item>
    </Menu.SubMenu>
  </Menu.SubMenu>
</Menu>
  • SubMenu может содержать другие SubMenu и Menu.Item, создавая вложенную структуру.
  • title – заголовок подменю, отображаемый в интерфейсе.

Иконки и кастомизация

Каждый пункт меню может содержать иконку, импортированную из @ant-design/icons:

import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';

<Menu mode="horizontal">
  <Menu.Item key="mail" icon={<MailOutlined />}>
    Почта
  </Menu.Item>
  <Menu.SubMenu key="apps" icon={<AppstoreOutlined />} title="Приложения">
    <Menu.Item key="calendar">Календарь</Menu.Item>
  </Menu.SubMenu>
</Menu>
  • Свойство icon принимает React-элемент, который отображается слева от текста пункта меню.

Управление открытием SubMenu

С помощью openKeys и onOpenChange можно контролировать открытие подпунктов:

const [openKeys, setOpenKeys] = useState([]);

<Menu
  mode="inline"
  openKeys={openKeys}
  onOpenCha nge={(keys) => setOpenKeys(keys)}
>
  <Menu.SubMenu key="products" title="Продукты">
    <Menu.Item key="laptop">Ноутбуки</Menu.Item>
    <Menu.Item key="phones">Смартфоны</Menu.Item>
  </Menu.SubMenu>
</Menu>
  • openKeys – массив ключей открытых подменю.
  • onOpenChange – обработчик изменения открытых подменю.

При использовании с react-router-dom удобно заменять Menu.Item на Link, сохраняя ключи для выделения:

import { Link } from 'react-router-dom';

<Menu selectedKeys={[current]} onCl ick={(e) => setCurrent(e.key)} mode="horizontal">
  <Menu.Item key="/">
    <Link to="/">Главная</Link>
  </Menu.Item>
  <Menu.Item key="/about">
    <Link to="/about">О нас</Link>
  </Menu.Item>
</Menu>

Дополнительные возможности

  • disabled – блокирует пункт меню: <Menu.Item key="settings" disabled>Настройки</Menu.Item>.
  • danger – делает текст пункта красным для обозначения критических действий.
  • theme – задаёт цветовую тему меню: light или dark.
<Menu mode="horizontal" theme="dark">
  <Menu.Item key="dashboard">Панель</Menu.Item>
</Menu>
</Menu>
  • inlineCollapsed – позволяет сворачивать вертикальное меню, показывая только иконки.

Использование групп пунктов

Для организации логически связанных пунктов можно применять Menu.ItemGroup:

<Menu mode="vertical">
  <Menu.ItemGroup key="group1" title="Категория 1">
    <Menu.Item key="item1">Пункт 1</Menu.Item>
    <Menu.Item key="item2">Пункт 2</Menu.Item>
  </Menu.ItemGroup>
  <Menu.ItemGroup key="group2" title="Категория 2">
    <Menu.Item key="item3">Пункт 3</Menu.Item>
  </Menu.ItemGroup>
</Menu>
  • ItemGroup добавляет визуальное разделение между группами пунктов и поддерживает заголовок.

Стилизация и кастомные классы

Menu поддерживает добавление собственного CSS через свойства className и style:

<Menu mode="horizontal" className="custom-menu" style={{ backgroundColor: '#f0f0f0' }}>
  <Menu.Item key="home">Главная</Menu.Item>
</Menu>
  • Кастомные классы позволяют интегрировать меню в общий дизайн приложения без изменения исходных стилей Ant Design.

Резюме структуры

  • Menu.Item – отдельный пункт меню.
  • Menu.SubMenu – подменю с вложенными элементами.
  • Menu.ItemGroup – логическая группа пунктов.
  • selectedKeys / onClick – управление активным элементом.
  • openKeys / onOpenChange – контроль открытых подменю.
  • icon, theme, inlineCollapsed – визуальная настройка и стилизация.

Menu в Ant Design предоставляет гибкую и мощную систему навигации, легко интегрируемую с современными React-приложениями и поддерживающую сложные вложенные структуры.

Оглавление