HeaderLayout
Контейнер legacy-шапки с обратимо совместимыми слотами menu, logo, select, breadcrumbs и toolbar. При isMobile селектор скрывается, хлебные крошки переносятся под основную строку.
Когда использовать
- Нужна единая раскладка верхней полосы консоли с разделителями между слотами.
- Desktop и mobile отличаются только положением breadcrumbs и видимостью
select.
Когда не нужен:
- Полноценное боковое меню навигации:
- используйте
MainMenu.
- используйте
Анатомия
Слоты
menu— триггер главного меню.logo— брендовый логотип.select— селектор проекта (скрывается приisMobile).breadcrumbs— хлебные крошки (на mobile — под основной строкой).toolbar— действия справа.
isMobile (default false)
false— одна строка: menu + logo + select + breadcrumbs | toolbar.true— select скрыт, breadcrumbs во второй строке.
Установка
pnpm add @cloud-ru/ds-uikit-product-header-legacyimport { HeaderLayout } from '@cloud-ru/ds-uikit-product-header-legacy'Примеры использования
Desktop
tsx
import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';
function Slot({ label }: { label: string }) {
return <div style={{ padding: '4px 8px', border: '1px dashed #ccc', fontSize: 12 }}>{label}</div>;
}
export function Desktop() {
return (
<HeaderLayout
menu={<Slot label='Menu' />}
logo={<Logo href='#' />}
select={<Slot label='Select' />}
breadcrumbs={<Slot label='Breadcrumbs' />}
toolbar={<Slot label='Toolbar' />}
/>
);
}Mobile
tsx
import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';
function Slot({ label }: { label: string }) {
return <div style={{ padding: '4px 8px', border: '1px dashed #ccc', fontSize: 12 }}>{label}</div>;
}
export function Mobile() {
return (
<HeaderLayout
isMobile
menu={<Slot label='Menu' />}
logo={<Logo href='#' />}
select={<Slot label='Select' />}
breadcrumbs={<Slot label='Breadcrumbs' />}
toolbar={<Slot label='Toolbar' />}
/>
);
}Минимальный набор
tsx
import { HeaderLayout, Logo } from '@cloud-ru/ds-uikit-product-header-legacy';
function Slot({ label }: { label: string }) {
return <div style={{ padding: '4px 8px', border: '1px dashed #ccc', fontSize: 12 }}>{label}</div>;
}
export function Minimal() {
return <HeaderLayout menu={<Slot label='Menu' />} logo={<Logo href='#' />} toolbar={<Slot label='Toolbar' />} />;
}Props
Types
Props
HeaderLayoutProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
breadcrumbs | ReactNode | — | no | Хлебные крошки. |
className | string | — | no | CSS-класс корневого элемента. |
data-test-id | string | — | no | |
isMobile | boolean | false | no | Переносит хлебные крошки под основную строку и скрывает селектор. |
logo | ReactNode | — | no | Логотип платформы. |
menu | ReactNode | — | no | Главное меню. |
select | ReactNode | — | no | Селектор проекта. |
toolbar | ReactNode | — | no | Панель действий в правой части. |