Header

@cloud-ru/ds-uikit-product-header — новая продуктовая шапка консоли на Snack V2: layout, главное меню с сегментами и избранным, меню пользователя, логотип и хлебные крошки.

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

  • Новая навигация консоли с сегментами сервисов, избранным и настройками отображения карточек.
  • Полная замена header на Snack V2 без legacy-контрактов Figma headerOld / navigationOldDrawer.
  • Поэтапная миграция: MenuMobile (bottom sheet) подключается к legacy MainMenu через customMobileMenu.

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

Компоненты

КомпонентНазначение
HeaderLayoutКомпоновка слотов шапки: меню, логотип, селектор, хлебные крошки, тулбар
MainMenuГлавное меню: trigger + drawer (desktop resizable / mobile bottom sheet)
MenuMobileТолько mobile-drawer без trigger; для customMobileMenu в legacy
UserMenuМеню пользователя: профиль, тема, настройки и выход
LogoЛоготип продукта с режимом окружения и кастомным изображением
PathBreadcrumbsХлебные крошки пути в шапке
PlatformLogoИконки платформ (Evolution, Advanced, Enterprise и др.)

Установка

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

Figma

Смотри также