HeaderLayout

HeaderLayout — контейнер шапки консоли. Раскладывает переданные слоты по зонам: меню, логотип, селектор проекта, хлебные крошки и правый тулбар.

Демо

Preview

Logo

Project Select

Breadcrumbs

Toolbar

Prop

Type

Value

breadcrumbs

text

className

text

data-test-id

text

logo

text

menu

text

select

text

toolbar

text

Code

<HeaderLayout menu={"key":null,"ref":null,"props":{},"_owner":null} logo={"key":null,"ref":null,"props":{},"_owner":null} select={"key":null,"ref":null,"props":{},"_owner":null} breadcrumbs={"key":null,"ref":null,"props":{},"_owner":null} toolbar={"key":null,"ref":null,"props":{},"_owner":null} data-test-id="header-layout-demo" />

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

Сборка верхней панели консоли из готовых блоков (MainMenu, Logo, PathBreadcrumbs, UserMenu).
Единая раскладка шапки на desktop и mobile через AdaptiveProvider.

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

Полная шапка

Полная шапкаВсе слоты заполнены.

Logo

Select

Breadcrumbs

Toolbar

tsx

import { HeaderLayout } from '@cloud-ru/ds-uikit-product-header';

function Slot({ label }: { label: string }) {
  return <div style={{ padding: '4px 8px', fontSize: 12 }}>{label}</div>;
}

export function Basic() {
  return (
    <HeaderLayout
      menu={<Slot label='Menu' />}
      logo={<Slot label='Logo' />}
      select={<Slot label='Select' />}
      breadcrumbs={<Slot label='Breadcrumbs' />}
      toolbar={<Slot label='Toolbar' />}
      data-test-id='header-layout-basic'
    />
  );
}

Частичная компоновка

Частичная компоновкаСлоты `select` и `toolbar` опциональны — можно не передавать.

Logo

Breadcrumbs

tsx

import { HeaderLayout } from '@cloud-ru/ds-uikit-product-header';

function Slot({ label }: { label: string }) {
  return <div style={{ padding: '4px 8px', fontSize: 12 }}>{label}</div>;
}

export function PartialSlots() {
  return (
    <HeaderLayout
      menu={<Slot label='Menu' />}
      logo={<Slot label='Logo' />}
      breadcrumbs={<Slot label='Breadcrumbs' />}
      data-test-id='header-layout-partial'
    />
  );
}

Props

Types

PropsHeaderLayoutProps

Prop	Type	Default	Required	Description
`breadcrumbs`	`ReactNode`	—	no	Слот хлебных крошек. На mobile переносится под основную строку хедера.
`className`	`string`	—	no	CSS-класс корневого элемента.
`data-test-id`	`string`	—	no
`logo`	`ReactNode`	—	no	Слот логотипа (крайний левый).
`menu`	`ReactNode`	—	no	Слот главного меню (слева, после логотипа).
`select`	`ReactNode`	—	no	Слот селектора (например, выбор облака/организации), после меню.
`toolbar`	`ReactNode`	—	no	Слот тулбара — правая часть хедера.

HeaderLayout

Демо

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

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

Полная шапка

Частичная компоновка

Props

Types

Types

HeaderLayoutProps

Storybook

Figma