Активные пункты меню

В Ant Design компонент Menu используется для создания навигационных панелей, выпадающих меню и боковых меню. Одной из ключевых задач при построении интерфейса является правильное управление активными пунктами меню, чтобы пользователь всегда видел, на каком разделе он находится.

Свойство selectedKeys

Для того чтобы указать, какой пункт меню активен, используется свойство selectedKeys. Оно принимает массив строк — ключей элементов меню.

import { Menu } from 'antd';

const items = [
  { label: 'Главная', key: 'home' },
  { label: 'Профиль', key: 'profile' },
  { label: 'Настройки', key: 'settings' },
];

<Menu selectedKeys={['profile']} items={items} mode="horizontal" />

В этом примере активным будет пункт с ключом 'profile'.

Особенности использования selectedKeys:

  • Массив позволяет выделять несколько пунктов одновременно, если это необходимо.
  • Для динамического изменения активного пункта необходимо управлять selectedKeys через состояние компонента.
import { useState } from 'react';
import { Menu } from 'antd';

const App = () => {
  const [selectedKey, setSelectedKey] = useState('home');

  const handleClick = e => {
    setSelectedKey(e.key);
  };

  return (
    <Menu
      onCl ick={handleClick}
      selectedKeys={[selectedKey]}
      items={[
        { label: 'Главная', key: 'home' },
        { label: 'Профиль', key: 'profile' },
        { label: 'Настройки', key: 'settings' },
      ]}
      mode="horizontal"
    />
  );
};

Свойство defaultSelectedKeys

Если необходимо указать пункт по умолчанию без управления состоянием, используется defaultSelectedKeys. Этот ключ активен только при первом рендере компонента:

<Menu
  defaultSelectedKeys={['settings']}
  items={[
    { label: 'Главная', key: 'home' },
    { label: 'Профиль', key: 'profile' },
    { label: 'Настройки', key: 'settings' },
  ]}
/>

defaultSelectedKeys удобно использовать для статических меню, где не требуется динамическое выделение.

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

Для вложенных меню (SubMenu) активный пункт определяется ключом дочернего элемента. Если нужно, чтобы подсекция была раскрыта при активном дочернем элементе, используется свойство openKeys.

const items = [
  {
    label: 'Профиль',
    key: 'profile',
    children: [
      { label: 'Личные данные', key: 'personal' },
      { label: 'Пароль', key: 'password' },
    ],
  },
  { label: 'Настройки', key: 'settings' },
];

<Menu
  selectedKeys={['password']}
  defaultOpenKeys={['profile']}
  mode="inline"
  items={items}
/>
  • selectedKeys определяет активный пункт ('password').
  • defaultOpenKeys задаёт, какие подменю открыты при первом рендере ('profile').

Для динамического управления раскрытием подменю используется openKeys вместе с обработчиком onOpenChange.

Горизонтальное и вертикальное меню

Горизонтальное меню (mode="horizontal") и вертикальное меню (mode="vertical" или "inline") имеют различия в отображении активного пункта:

  • В горизонтальном режиме активный пункт выделяется подчеркиванием и цветом текста.
  • В вертикальном режиме активный пункт подсвечивается фоном и цветом текста, а при наличии вложенных элементов автоматически раскрывается при наведении или клике.
<Menu
  mode="horizontal"
  selectedKeys={['home']}
  items={[
    { label: 'Главная', key: 'home' },
    { label: 'О нас', key: 'about' },
  ]}
/>

Динамическое управление через маршрутизацию

При интеграции с react-router или любой другой библиотекой маршрутизации, активный пункт меню часто зависит от текущего URL.

import { useLocation, useNavigate } from 'react-router-dom';
import { Menu } from 'antd';

const items = [
  { label: 'Главная', key: '/' },
  { label: 'Профиль', key: '/profile' },
  { label: 'Настройки', key: '/settings' },
];

const AppMenu = () => {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <Menu
      mode="horizontal"
      selectedKeys={[location.pathname]}
      onCl ick={(e) => navigate(e.key)}
      items={items}
    />
  );
};
  • location.pathname автоматически подставляет активный пункт.
  • onClick меняет маршрут при выборе элемента.

Таким образом, меню всегда синхронизировано с текущим URL, обеспечивая корректное отображение активного состояния.

Кастомизация стиля активного пункта

Ant Design позволяет менять стиль активного пункта через тему, классы CSS или пропсы style.

<Menu
  selectedKeys={['home']}
  items={[
    { label: 'Главная', key: 'home' },
    { label: 'Профиль', key: 'profile' },
  ]}
  style={{ backgroundColor: '#f0f0f0' }}
  className="custom-menu"
/>

<style>
.custom-menu .ant-menu-item-selected {
  background-color: #1890ff;
  color: #fff;
}
</style>
  • Использование ant-menu-item-selected позволяет полностью управлять внешним видом активного пункта.
  • Можно комбинировать inline-стили и CSS-классы для гибкой настройки.

Выводы по работе с активными пунктами

  • selectedKeys — для динамического управления активным пунктом.
  • defaultSelectedKeys — для установки пункта по умолчанию без состояния.
  • openKeys и defaultOpenKeys — для работы с вложенными меню.
  • Интеграция с маршрутизацией позволяет автоматически синхронизировать активный пункт с URL.
  • Кастомизация через CSS или стили даёт полный контроль над внешним видом активного состояния.

Эти механизмы позволяют создавать гибкие, удобные и наглядные меню в приложениях на базе Ant Design, обеспечивая пользователю понятную навигацию и визуальные подсказки о текущем контексте.

Оглавление