MainMenu

MainMenu — drawer с каталогом сервисов: сегменты, fuzzy-поиск, избранное, DnD групп и карточек.

Desktop — resizable @cloud-ru/ds-drawer слева: левая колонка (избранное, настройки), правая — сегменты и сетка карточек.
Mobile — fullscreen bottom sheet (MobileDrawerCustom, position='bottom'): sticky header с логотипом, scroll-body, поиск и каталог.

Поверхность выбирается через AdaptiveProvider (layoutType).

Когда использовать

Навигация по каталогу облачных сервисов из шапки консоли (новая продуктовая навигация).
Сценарии с избранным, недавними сервисами и настройками отображения карточек.
Mobile-меню для микрофронта на legacy HeaderLayout: MenuMobile подключается через customMobileMenu у @cloud-ru/ds-uikit-product-header-legacy / MainMenu.

Когда не нужен:

Legacy drawer по Figma navigationOldDrawer / navigationOldDrawerMobile:
- используйте @cloud-ru/ds-uikit-product-header-legacy.

Анатомия

Trigger и drawer

trigger — HeaderButton с MainMenuSVG и tooltip «Сервисы».
desktop drawer — resizable DrawerCustom, слева; drag-handle для ширины.
mobile drawer — fullscreen bottom sheet; swipe отключён (swipeEnabled={false}).

Левая колонка (desktop)

leftTop — слот над избранным (например, селектор платформы).
Favorites — избранные сервисы с DnD (MainMenuDndContext).
settingItems — административные пункты (mapInnerLinksToListItems).
leftBottom — дополнительный слот внизу колонки.

Правая колонка (desktop)

rightTop — баннеры.
Search — fuzzy-поиск по каталогу.
segments — сегменты с SegmentControl (если сегментов > 1).
Сетка карточек CardServiceSmall по группам в активном сегменте.

Mobile body

MenuHeaderBrand + divider — sticky header с кнопкой закрытия.
leftTop, Search, rightTop, Content — в scroll-body.
settingItems / leftBottom — нижняя зона (MenuBottom).
Избранное без drag&drop (desktop-only DnD).

open / setOpen

Controlled-открытие drawer. Без open состояние держит сам компонент.

MenuMobile

MenuMobile экспортируется из @cloud-ru/ds-uikit-product-header отдельно от MainMenu — тот же API (MainMenuProps), но без кнопки-триггера. Используется:

внутри MainMenu на mobile-поверхности;
в legacy-интеграции: customMobileMenu у @cloud-ru/ds-uikit-product-header-legacy / MainMenu.

import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';

Types

PropsMainMenuProps

Prop	Type	Default	Required	Description
`activeSegmentId`	`string`	—	no	Активный сегмент правой панели (значение SegmentControl, см. {@link MainMenuSegment.id}). Не передано — неуправляемое состояние (дефолт — первый сегмент с видимыми карточками).
`defaultWidth`	`number`	—	no	Ширина дровера, с которой открывается меню (desktop only)
`disabled`	`boolean`	—	no	Кнопка открытия меню недоступна для клика.
`draggerTooltip`	`string`	—	no	Текст подсказки для драггера (desktop only)
`favorite`	`FavoriteProps`	—	no	Избранное. Без пропа группа-предок карточек драга из избранного не активируется. Избранное. Без пропа секция «Избранное» не отображается.
`leftBottom`	`ReactNode`	—	no	Слот под пунктами настроек в левой колонке (desktop) / в конце списка (mobile).
`leftTop`	`ReactNode`	—	no	Слот над поиском в левой колонке (desktop) / над поиском в списке (mobile).
`loading`	`boolean`	—	no	Флаг загрузки данных
`logo`	`ReactNode`	—	no	Логотип в шапке меню.
`onActiveSegmentChange`	`((segmentId: string) => void)`	—	no	Колбэк смены активного сегмента правой панели.
`onSegmentExpandedChange`	`((segmentId: string, expandedGroupIds: string[]) => void)`	—	no	Колбэк при изменении набора раскрытых групп сегмента (без id синтетической группы избранного).
`onSegmentOrderChange`	`((segmentId: string, orderedGroupIds: string[]) => void)`	—	no	Колбэк после DnD групп в сегменте (без id синтетической группы избранного).
`onSegmentServiceClick`	`((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	no	Колбэк клика по карточке сервиса в сегменте.
`onWidthChangeEnd`	`((width: number) => void)`	—	no	Вызывается при окончании изменения ширины дровера (desktop only)
`open`	`boolean`	`false`	no	Открыто ли меню. Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку).
`platformGroups`	`LinksGroup[]`	—	no	Платформенные группы (например «Облачные продукты», «Другие продукты»). Без поиска в сетке карточек не отображаются. С поиском: попадают в результаты при совпадении; порядок — после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`).
`preferences`	`MainMenuPreferencesProps`	—	no	Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. Не передано — кнопка настроек в тулбаре не отображается.
`rightTop`	`ReactNode`	—	no	Слот над тулбаром правой колонки (например, баннеры)
`search`	`SearchProps`	—	no	Поиск по сервисам. Без пропа поисковая строка не отображается.
`searchGroups`	`LinksGroup[]`	—	no	Результаты поиска (уже смерженные); в обычном режиме не используются.
`segmentPrefs`	`MainMenuSegmentPrefs[]`	—	no	Пользовательские prefs сегментов (порядок / раскрытие групп). Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля.
`segments`	`MainMenuSegment[]`	—	no	Сегменты правой панели (сетка карточек) — только каталог. При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже.
`setOpen`	`((open: boolean) => void)`	—	no	Колбэк открытия/закрытия меню.
`settingItems`	`MainMenuSettingsItem[]`	—	no	Пункты левой колонки (desktop) / нижней части списка (mobile). Плоский список (`dividerBefore` для разделителей). Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.

`FavoriteProps`interface

Prop	Type	Default	Required	Description
`actions`	`{ items: BaseItemProps[]; onDroplistOpenChange?(open: boolean): void; } \| undefined`	—	no	Действия для списка сервисов
`loading`	`boolean \| undefined`	—	no	Флаг загрузки данных
`onChange`	`(productId: string) => (addingValue: boolean, position?: number) => void`	—	yes	Колбэк переключения избранного для карточки сервиса. `position` передаётся при добавлении через drag из сетки сервисов — индекс, на который должна встать карточка среди избранного (см. {@link FavoriteProps.onOrderChange } ). При переключении избранного кликом не передаётся.
`onFavoriteServiceClick`	`((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined`	—	no	Колбэк клика по карточке сервиса в сегменте «Избранное»
`onOrderChange`	`((orderedIds: string[]) => void) \| undefined`	—	no	Колбэк вызывается после перетаскивания карточек внутри избранного с новым порядком id. Добавление новой карточки через drag из сетки сервисов идёт через {@link FavoriteProps.onChange } с `position` — этот колбэк для такого добавления не вызывается.
`onRecentServiceClick`	`((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined`	—	no	Колбэк клика по карточке сервиса в сегменте «Недавнее»
`onSegmentChange`	`((segment: FavoritesSegment) => void) \| undefined`	—	no	Колбэк смены сегмента панели избранного.
`recentServices`	`string[] \| undefined`	—	no	Список id недавно открытых сервисов
`segment`	`"favorites" \| "recent"`	—	no	Активный сегмент («Избранное» / «Недавнее») в панели избранного. Не передано — неуправляемое состояние (дефолт `'favorites'`).
`value`	`string[]`	—	yes	Список id избранных сервисов

`InnerLink`interface

Prop	Type	Default	Required	Description
`aliases`	`string[]`	—	yes	Синонимы для fuzzy-поиска.
`badge`	`CardPromoTagProps \| undefined`	—	no	Промо-тег карточки.
`description`	`string \| undefined`	—	no	Краткое описание сервиса — отображается при включённом переключателе «Описание».
`disabled`	`boolean \| undefined`	—	no	Карточка недоступна для клика/drag и визуально приглушена.
`favoritesEnabled`	`boolean \| undefined`	—	no	Разрешено ли добавление карточки в избранное. default=true - разрешено
`hidden`	`boolean \| undefined`	—	no	Карточка скрыта (не рендерится, но остаётся в данных — например, для поиска).
`href`	`string \| undefined`	—	no	Ссылка карточки (рендерится как `<a>`).
`icon`	`JSXElementConstructor<{ size?: number; className?: string; }> \| undefined`	—	no	Иконка карточки.
`id`	`string`	—	yes	Уникальный идентификатор карточки (также используется в избранном и при поиске). Один и тот же сервис может быть представлен в разных сегментах с разной детализацией (простая карточка в общем каталоге и раскрытая с вложенными сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments } ).
`items`	`Omit<InnerLink, "items" \| "viewMode" \| "expandableEnabled">[] \| undefined`	—	no	Вложенные сервисы подкатегории. При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка с кнопкой раскрытия, в развёрнутом — заголовок {@link TitleClickable } и сетка вложенных сервисов.
`label`	`string`	—	yes	Заголовок карточки.
`onClick`	`(e?: MouseEvent<HTMLElement>) => void`	—	yes	Колбэк клика по карточке.
`viewMode`	`"expandable" \| "expanded" \| "flat-link" \| "group-title-only"`	—	no	Режим отображения карточки. default='expandable'. - `'expandable'` — подкатегория при наличии реальных {@link items } : заголовок {@link TitleClickable } с шевроном и сетка вложенных сервисов (раскрытие/схлопывание — см. {@link expandableEnabled } ). Без `items` — обычная карточка сервиса. - `'group-title-only'` — заголовок подкатегории ( {@link TitleClickable } с шевроном) без раскрываемого тела, даже если `items` заданы: карточка ведёт себя как обычная ссылка. Полезно для группы, чьи вложенные сервисы показываются на отдельной странице. - `'flat-link'` — всегда обычная карточка сервиса, даже если `items` заданы.

`LinksGroup`interface

Prop	Type	Default	Required	Description
`aliases`	`string[] \| undefined`	—	no	Синонимы заголовка группы для fuzzy-поиска.
`blockColor`	`"blue" \| "green" \| "neutral" \| "orange" \| "pink" \| "primary" \| "red" \| "violet" \| "yellow"`	—	no	Цвет блока группы.
`favoritesEnabled`	`boolean \| undefined`	—	no	Разрешено ли добавление карточек группы в избранное.
`hidden`	`boolean \| undefined`	—	no	Группа скрыта (не рендерится, но остаётся в данных — например, для поиска).
`highlight`	`boolean \| undefined`	—	no	Визуальное выделение группы.
`icon`	`JSXElementConstructor<{ size?: number; className?: string; }> \| undefined`	—	no	Иконка группы.
`id`	`string`	—	yes	Уникальный идентификатор группы (якорь скролла, поиск по id).
`items`	`InnerLink[]`	—	yes	Карточки сервисов или ссылок внутри группы.
`label`	`TitleStatic \| TitleClickable`	—	yes	Заголовок группы в сетке карточек и в боковой навигации.
`onClick`	`((e?: MouseEvent<HTMLElement>) => void) \| undefined`	—	no	Колбэк клика по заголовку группы.

`MainMenuPreferencesProps`interface

Prop	Type	Default	Required	Description
`onOpenChange`	`((open: boolean) => void) \| undefined`	—	no	Колбэк открытия/закрытия модалки.
`open`	`boolean \| undefined`	—	no	Открыта ли модалка настроек. Не передано — состояние открытия неуправляемое (модалка сама переключает себя по клику на кнопку).
`showDescription`	`{ value: boolean; onChange(value: boolean): void; }`	—	yes	Показывать описания сервисов в карточках.
`showGroupsColors`	`MainMenuToggleProps \| undefined`	—	no	Отображать цвета блоков групп ( {@link LinksGroup.blockColor } ). `value: false` скрывает цвета всех групп независимо от заданного `blockColor`.

`MainMenuSegment`interface

Prop	Type	Default	Required	Description
`icon`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no	Иконка сегмента в SegmentControl; без неё — только `label`.
`id`	`string`	—	yes	Уникальный идентификатор сегмента (значение SegmentControl).
`items`	`LinksGroup[]`	—	yes	Группы карточек сегмента (каталог).
`label`	`string`	—	yes	Подпись сегмента в SegmentControl.
`pinBottomOnSearch`	`boolean \| undefined`	—	no	Группы сегмента в выдаче поиска — после совпадений из обычных сегментов и `platformGroups`.

`MainMenuSegmentPrefs`interface

Prop	Type	Default	Required	Description
`expanded`	`string[] \| undefined`	—	no	Id раскрытых групп. Если не передан — uncontrolled (по умолчанию все раскрыты).
`id`	`string`	—	yes	Id сегмента из {@link MainMenuSegment.id } .
`order`	`string[] \| undefined`	—	no	Порядок id групп. Если не передан — uncontrolled для этого сегмента (дефолт = порядок `items`; новые группы добавляются в конец).

`MainMenuSettingsItem`interface

Prop	Type	Default	Required	Description
`divider`	`"after" \| "before"`	—	no	Разделитель до/после пункта.
`hidden`	`boolean \| undefined`	—	no	Карточка скрыта (не рендерится, но остаётся в данных — например, для поиска).
`href`	`string \| undefined`	—	no	Ссылка карточки (рендерится как `<a>`).
`icon`	`JSXElementConstructor<{ size?: number; className?: string; }> \| undefined`	—	no	Иконка карточки.
`id`	`string`	—	yes	Уникальный идентификатор карточки (также используется в избранном и при поиске). Один и тот же сервис может быть представлен в разных сегментах с разной детализацией (простая карточка в общем каталоге и раскрытая с вложенными сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments } ).
`label`	`string`	—	yes	Заголовок карточки.
`onClick`	`(e?: MouseEvent<HTMLElement>) => void`	—	yes	Колбэк клика по карточке.

`SearchProps`interface

Prop	Type	Default	Required	Description
`onBlur`	`FocusEventHandler<HTMLInputElement> \| undefined`	—	no	Колбек обработки потери фокуса
`onChange`	`(value: string) => void`	—	yes	Колбэк изменения значения поисковой строки.
`onFocus`	`FocusEventHandler<HTMLInputElement> \| undefined`	—	no	Колбек обработки получения фокуса
`onSearchNoResult`	`((value: string) => void) \| undefined`	—	no	Колбэк вызывается, когда поиск по текущему значению не дал результатов.
`value`	`string`	—	yes	Текущее значение поисковой строки.

Types

MainMenuProps

Установка

pnpm add @cloud-ru/ds-uikit-product-header

import { MainMenu, MenuMobile } from '@cloud-ru/ds-uikit-product-header';
import '@cloud-ru/ds-uikit-product-header/style.css';

Примеры использования

Базовое меню

Базовое менюОдин сегмент с группами сервисов. Открывается кнопкой «Меню».

tsx

import { ViewTileSVG } from '@cloud-ru/ds-icons/interface/product';
import { MainMenu } from '@cloud-ru/ds-uikit-product-header';

import { SERVICE_GROUPS } from '../../../stories/demoData';

export function Basic() {
  return (
    <MainMenu
      segments={[
        {
          id: 'allServices',
          label: 'Все сервисы',
          icon: <ViewTileSVG size={24} />,
          items: SERVICE_GROUPS.slice(0, 2),
        },
      ]}
      data-test-id='header-main-menu-basic'
    />
  );
}

С поиском

С поискомControlled `search` фильтрует карточки по fuzzy-совпадению.

tsx

import { ViewTileSVG } from '@cloud-ru/ds-icons/interface/product';
import { MainMenu } from '@cloud-ru/ds-uikit-product-header';
import { useState } from 'react';

import { SERVICE_GROUPS } from '../../../stories/demoData';

export function WithSearch() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <MainMenu
      segments={[
        {
          id: 'allServices',
          label: 'Все сервисы',
          icon: <ViewTileSVG size={24} />,
          items: SERVICE_GROUPS.slice(0, 3),
        },
      ]}
      search={{ value: searchValue, onChange: setSearchValue }}
      data-test-id='header-main-menu-search'
    />
  );
}

С избранным

С избранным`favorite.value` и `favorite.onChange` управляют списком избранных сервисов.

tsx

import { ViewTileSVG } from '@cloud-ru/ds-icons/interface/product';
import { MainMenu } from '@cloud-ru/ds-uikit-product-header';
import { useState } from 'react';

import { SERVICE_GROUPS } from '../../../stories/demoData';

export function WithFavorites() {
  const [favoriteIds, setFavoriteIds] = useState<string[]>(['inference']);

  return (
    <MainMenu
      segments={[
        {
          id: 'allServices',
          label: 'Все сервисы',
          icon: <ViewTileSVG size={24} />,
          items: SERVICE_GROUPS.slice(0, 2),
        },
      ]}
      favorite={{
        value: favoriteIds,
        onChange: productId => (addingValue: boolean) => {
          setFavoriteIds(prev => (addingValue ? [...prev, productId] : prev.filter(id => id !== productId)));
        },
      }}
      data-test-id='header-main-menu-favorites'
    />
  );
}

Интеграция с legacy MainMenu

import { useState } from 'react';
import { MainMenu as LegacyMainMenu } from '@cloud-ru/ds-uikit-product-header-legacy';
import { MenuMobile } from '@cloud-ru/ds-uikit-product-header';

function LocalMainMenu() {
  const [open, setOpen] = useState(false);

  return (
    <LegacyMainMenu
      open={open}
      setOpen={setOpen}
      serviceGroups={legacyGroups}
      customMobileMenu={
        <MenuMobile
          open={open}
          setOpen={setOpen}
          segments={headerSegments}
        />
      }
    />
  );
}

Props

Types

PropsMainMenuProps

Prop	Type	Default	Required	Description
`activeSegmentId`	`string`	—	no	Активный сегмент правой панели (значение SegmentControl, см. {@link MainMenuSegment.id}). Не передано — неуправляемое состояние (дефолт — первый сегмент с видимыми карточками).
`defaultWidth`	`number`	—	no	Ширина дровера, с которой открывается меню (desktop only)
`disabled`	`boolean`	—	no	Кнопка открытия меню недоступна для клика.
`draggerTooltip`	`string`	—	no	Текст подсказки для драггера (desktop only)
`favorite`	`FavoriteProps`	—	no	Избранное. Без пропа группа-предок карточек драга из избранного не активируется. Избранное. Без пропа секция «Избранное» не отображается.
`leftBottom`	`ReactNode`	—	no	Слот под пунктами настроек в левой колонке (desktop) / в конце списка (mobile).
`leftTop`	`ReactNode`	—	no	Слот над поиском в левой колонке (desktop) / над поиском в списке (mobile).
`loading`	`boolean`	—	no	Флаг загрузки данных
`logo`	`ReactNode`	—	no	Логотип в шапке меню.
`onActiveSegmentChange`	`((segmentId: string) => void)`	—	no	Колбэк смены активного сегмента правой панели.
`onSegmentExpandedChange`	`((segmentId: string, expandedGroupIds: string[]) => void)`	—	no	Колбэк при изменении набора раскрытых групп сегмента (без id синтетической группы избранного).
`onSegmentOrderChange`	`((segmentId: string, orderedGroupIds: string[]) => void)`	—	no	Колбэк после DnD групп в сегменте (без id синтетической группы избранного).
`onSegmentServiceClick`	`((service: InnerLink, e?: MouseEvent<HTMLElement, MouseEvent>) => void)`	—	no	Колбэк клика по карточке сервиса в сегменте.
`onWidthChangeEnd`	`((width: number) => void)`	—	no	Вызывается при окончании изменения ширины дровера (desktop only)
`open`	`boolean`	—	no	Открыто ли меню. Не передано — состояние открытия неуправляемое (меню само переключает себя по клику на кнопку).
`platformGroups`	`LinksGroup[]`	—	no	Платформенные группы (например «Облачные продукты», «Другие продукты»). Без поиска в сетке карточек не отображаются. С поиском: попадают в результаты при совпадении; порядок — после совпадений из сегментов без `pinBottomOnSearch`, перед сегментами с `pinBottomOnSearch`. Обычно `favoritesEnabled: false`; карточки могут быть без `icon` (Avatar по `label`).
`preferences`	`MainMenuPreferencesProps`	—	no	Настройки меню (модалка по кнопке в тулбаре): описания карточек, цвета групп. Не передано — кнопка настроек в тулбаре не отображается.
`rightTop`	`ReactNode`	—	no	Слот над тулбаром правой колонки (например, баннеры)
`search`	`SearchProps`	—	no	Поиск по сервисам. Без пропа поисковая строка не отображается.
`searchGroups`	`LinksGroup[]`	—	no	Результаты поиска (уже смерженные); в обычном режиме не используются.
`segmentPrefs`	`MainMenuSegmentPrefs[]`	—	no	Пользовательские prefs сегментов (порядок / раскрытие групп). Нет записи для сегмента или omit `order` / `expanded` → uncontrolled для этого поля.
`segments`	`MainMenuSegment[]`	—	no	Сегменты правой панели (сетка карточек) — только каталог. При поиске: совпадения из сегментов без `pinBottomOnSearch` → `platformGroups` → сегменты с `pinBottomOnSearch`. Если один и тот же {@link InnerLink.id} совпал сразу в нескольких сегментах — остаётся только первое по этому приоритету вхождение, остальные (и опустевшие после этого группы) не показываются. При `segments.length > 1` показывается SegmentControl (скрывается во время поиска). Порядок и раскрытие групп — через `segmentPrefs` и колбэки ниже.
`setOpen`	`((open: boolean) => void)`	—	no	Колбэк открытия/закрытия меню.
`settingItems`	`MainMenuSettingsItem[]`	—	no	Пункты левой колонки (desktop) / нижней части списка (mobile). Плоский список (`dividerBefore` для разделителей). Не связан с сегментами правой панели и не меняется при сортировке групп в сегментах.

`FavoriteProps`interface

Prop	Type	Default	Required	Description
`actions`	`{ items: BaseItemProps[]; onDroplistOpenChange?(open: boolean): void; } \| undefined`	—	no	Действия для списка сервисов
`loading`	`boolean \| undefined`	—	no	Флаг загрузки данных
`onChange`	`(productId: string) => (addingValue: boolean, position?: number) => void`	—	yes	Колбэк переключения избранного для карточки сервиса. `position` передаётся при добавлении через drag из сетки сервисов — индекс, на который должна встать карточка среди избранного (см. {@link FavoriteProps.onOrderChange } ). При переключении избранного кликом не передаётся.
`onFavoriteServiceClick`	`((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined`	—	no	Колбэк клика по карточке сервиса в сегменте «Избранное»
`onOrderChange`	`((orderedIds: string[]) => void) \| undefined`	—	no	Колбэк вызывается после перетаскивания карточек внутри избранного с новым порядком id. Добавление новой карточки через drag из сетки сервисов идёт через {@link FavoriteProps.onChange } с `position` — этот колбэк для такого добавления не вызывается.
`onRecentServiceClick`	`((serviceId: string, event?: MouseEvent<HTMLElement>) => void) \| undefined`	—	no	Колбэк клика по карточке сервиса в сегменте «Недавнее»
`onSegmentChange`	`((segment: FavoritesSegment) => void) \| undefined`	—	no	Колбэк смены сегмента панели избранного.
`recentServices`	`string[] \| undefined`	—	no	Список id недавно открытых сервисов
`segment`	`"favorites" \| "recent"`	—	no	Активный сегмент («Избранное» / «Недавнее») в панели избранного. Не передано — неуправляемое состояние (дефолт `'favorites'`).
`value`	`string[]`	—	yes	Список id избранных сервисов

`InnerLink`interface

Prop	Type	Default	Required	Description
`aliases`	`string[]`	—	yes	Синонимы для fuzzy-поиска.
`badge`	`CardPromoTagProps \| undefined`	—	no	Промо-тег карточки.
`description`	`string \| undefined`	—	no	Краткое описание сервиса — отображается при включённом переключателе «Описание».
`disabled`	`boolean \| undefined`	—	no	Карточка недоступна для клика/drag и визуально приглушена.
`favoritesEnabled`	`boolean \| undefined`	—	no	Разрешено ли добавление карточки в избранное. default=true - разрешено
`hidden`	`boolean \| undefined`	—	no	Карточка скрыта (не рендерится, но остаётся в данных — например, для поиска).
`href`	`string \| undefined`	—	no	Ссылка карточки (рендерится как `<a>`).
`icon`	`JSXElementConstructor<{ size?: number; className?: string; }> \| undefined`	—	no	Иконка карточки.
`id`	`string`	—	yes	Уникальный идентификатор карточки (также используется в избранном и при поиске). Один и тот же сервис может быть представлен в разных сегментах с разной детализацией (простая карточка в общем каталоге и раскрытая с вложенными сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments } ).
`items`	`Omit<InnerLink, "items" \| "viewMode" \| "expandableEnabled">[] \| undefined`	—	no	Вложенные сервисы подкатегории. При наличии карточка раскрывается аккордеоном: в свёрнутом виде — обычная карточка с кнопкой раскрытия, в развёрнутом — заголовок {@link TitleClickable } и сетка вложенных сервисов.
`label`	`string`	—	yes	Заголовок карточки.
`onClick`	`(e?: MouseEvent<HTMLElement>) => void`	—	yes	Колбэк клика по карточке.
`viewMode`	`"expandable" \| "expanded" \| "flat-link" \| "group-title-only"`	—	no	Режим отображения карточки. default='expandable'. - `'expandable'` — подкатегория при наличии реальных {@link items } : заголовок {@link TitleClickable } с шевроном и сетка вложенных сервисов (раскрытие/схлопывание — см. {@link expandableEnabled } ). Без `items` — обычная карточка сервиса. - `'group-title-only'` — заголовок подкатегории ( {@link TitleClickable } с шевроном) без раскрываемого тела, даже если `items` заданы: карточка ведёт себя как обычная ссылка. Полезно для группы, чьи вложенные сервисы показываются на отдельной странице. - `'flat-link'` — всегда обычная карточка сервиса, даже если `items` заданы.

`LinksGroup`interface

Prop	Type	Default	Required	Description
`aliases`	`string[] \| undefined`	—	no	Синонимы заголовка группы для fuzzy-поиска.
`blockColor`	`"blue" \| "green" \| "neutral" \| "orange" \| "pink" \| "primary" \| "red" \| "violet" \| "yellow"`	—	no	Цвет блока группы.
`favoritesEnabled`	`boolean \| undefined`	—	no	Разрешено ли добавление карточек группы в избранное.
`hidden`	`boolean \| undefined`	—	no	Группа скрыта (не рендерится, но остаётся в данных — например, для поиска).
`highlight`	`boolean \| undefined`	—	no	Визуальное выделение группы.
`icon`	`JSXElementConstructor<{ size?: number; className?: string; }> \| undefined`	—	no	Иконка группы.
`id`	`string`	—	yes	Уникальный идентификатор группы (якорь скролла, поиск по id).
`items`	`InnerLink[]`	—	yes	Карточки сервисов или ссылок внутри группы.
`label`	`TitleStatic \| TitleClickable`	—	yes	Заголовок группы в сетке карточек и в боковой навигации.
`onClick`	`((e?: MouseEvent<HTMLElement>) => void) \| undefined`	—	no	Колбэк клика по заголовку группы.

`MainMenuPreferencesProps`interface

Prop	Type	Default	Required	Description
`onOpenChange`	`((open: boolean) => void) \| undefined`	—	no	Колбэк открытия/закрытия модалки.
`open`	`boolean \| undefined`	—	no	Открыта ли модалка настроек. Не передано — состояние открытия неуправляемое (модалка сама переключает себя по клику на кнопку).
`showDescription`	`{ value: boolean; onChange(value: boolean): void; }`	—	yes	Показывать описания сервисов в карточках.
`showGroupsColors`	`MainMenuToggleProps \| undefined`	—	no	Отображать цвета блоков групп ( {@link LinksGroup.blockColor } ). `value: false` скрывает цвета всех групп независимо от заданного `blockColor`.

`MainMenuSegment`interface

Prop	Type	Default	Required	Description
`icon`	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| null \| undefined`	—	no	Иконка сегмента в SegmentControl; без неё — только `label`.
`id`	`string`	—	yes	Уникальный идентификатор сегмента (значение SegmentControl).
`items`	`LinksGroup[]`	—	yes	Группы карточек сегмента (каталог).
`label`	`string`	—	yes	Подпись сегмента в SegmentControl.
`pinBottomOnSearch`	`boolean \| undefined`	—	no	Группы сегмента в выдаче поиска — после совпадений из обычных сегментов и `platformGroups`.

`MainMenuSegmentPrefs`interface

Prop	Type	Default	Required	Description
`expanded`	`string[] \| undefined`	—	no	Id раскрытых групп. Если не передан — uncontrolled (по умолчанию все раскрыты).
`id`	`string`	—	yes	Id сегмента из {@link MainMenuSegment.id } .
`order`	`string[] \| undefined`	—	no	Порядок id групп. Если не передан — uncontrolled для этого сегмента (дефолт = порядок `items`; новые группы добавляются в конец).

`MainMenuSettingsItem`interface

Prop	Type	Default	Required	Description
`divider`	`"after" \| "before"`	—	no	Разделитель до/после пункта.
`hidden`	`boolean \| undefined`	—	no	Карточка скрыта (не рендерится, но остаётся в данных — например, для поиска).
`href`	`string \| undefined`	—	no	Ссылка карточки (рендерится как `<a>`).
`icon`	`JSXElementConstructor<{ size?: number; className?: string; }> \| undefined`	—	no	Иконка карточки.
`id`	`string`	—	yes	Уникальный идентификатор карточки (также используется в избранном и при поиске). Один и тот же сервис может быть представлен в разных сегментах с разной детализацией (простая карточка в общем каталоге и раскрытая с вложенными сервисами версия в другом сегменте) — в этом случае обеим версиям задаётся общий `id`. При поиске из совпадений с одинаковым `id` в разных сегментах остаётся только первое по приоритету сегментов (см. {@link MainMenuProps.segments } ).
`label`	`string`	—	yes	Заголовок карточки.
`onClick`	`(e?: MouseEvent<HTMLElement>) => void`	—	yes	Колбэк клика по карточке.

`SearchProps`interface

Prop	Type	Default	Required	Description
`onBlur`	`FocusEventHandler<HTMLInputElement> \| undefined`	—	no	Колбек обработки потери фокуса
`onChange`	`(value: string) => void`	—	yes	Колбэк изменения значения поисковой строки.
`onFocus`	`FocusEventHandler<HTMLInputElement> \| undefined`	—	no	Колбек обработки получения фокуса
`onSearchNoResult`	`((value: string) => void) \| undefined`	—	no	Колбэк вызывается, когда поиск по текущему значению не дал результатов.
`value`	`string`	—	yes	Текущее значение поисковой строки.

Types

MainMenuProps

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

Проп / поведение	Desktop	Mobile
Drawer	Resizable слева	Fullscreen bottom sheet
`favorite` DnD	Да	Нет
`segments` / `SegmentControl`	Да	Да (скрывается при поиске)
`preferences`	Модалка настроек в тулбаре	То же

Storybook

Открыть в Storybook →

Figma

Смотри также

@cloud-ru/ds-uikit-product-header-legacy / MainMenu — legacy drawer и проп customMobileMenu.
@cloud-ru/ds-uikit-product-card-predefined — карточки сервисов в сетке.

MainMenu

Когда использовать

Анатомия

Trigger и drawer

Левая колонка (desktop)

Правая колонка (desktop)

Mobile body

open / setOpen

MenuMobile

Types

FavoritePropsinterface

InnerLinkinterface

LinksGroupinterface

MainMenuPreferencesPropsinterface

MainMenuSegmentinterface

MainMenuSegmentPrefsinterface

MainMenuSettingsIteminterface

SearchPropsinterface

Types

MainMenuProps

FavoriteProps

InnerLink

LinksGroup

MainMenuPreferencesProps

MainMenuSegment

MainMenuSegmentPrefs

MainMenuSettingsItem

SearchProps

Установка

Примеры использования

Базовое меню

С поиском

С избранным

Интеграция с legacy MainMenu

Props

Types

FavoritePropsinterface

InnerLinkinterface

LinksGroupinterface

MainMenuPreferencesPropsinterface

MainMenuSegmentinterface

MainMenuSegmentPrefsinterface

MainMenuSettingsIteminterface

SearchPropsinterface

Types

MainMenuProps

FavoriteProps

InnerLink

LinksGroup

MainMenuPreferencesProps

MainMenuSegment

MainMenuSegmentPrefs

MainMenuSettingsItem

SearchProps

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

Storybook

Figma

Смотри также

`FavoriteProps`interface

`InnerLink`interface

`LinksGroup`interface

`MainMenuPreferencesProps`interface

`MainMenuSegment`interface

`MainMenuSegmentPrefs`interface

`MainMenuSettingsItem`interface

`SearchProps`interface

`FavoriteProps`interface

`InnerLink`interface

`LinksGroup`interface

`MainMenuPreferencesProps`interface

`MainMenuSegment`interface

`MainMenuSegmentPrefs`interface

`MainMenuSettingsItem`interface

`SearchProps`interface