TreeNavigation

Раскладка с деревом разделов: шапка (header), дерево-меню (menu) на @cloud-ru/ds-tree и контентная область (content). Способ показа дерева задаёт mode.

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

• Страница с иерархической навигацией по разделам (документация, настройки, дерево ресурсов).
• Нужно меню-дерево, которое можно держать сбоку, фиксировать или прятать в поповер.

Анатомия

Mode (default aside)

• popover — дерево открывается в поповере под кнопкой-бургером.
• aside — дерево в боковой колонке, сворачиваемое.
• fixed — боковая колонка всегда раскрыта (Figma-состояние treeMenu=fixed).

Шапка (header)

title обязателен; опционально icon, description, status (пропсы @cloud-ru/ds-status) и actions.

Меню (menu)

• items — данные дерева (TreeNodeProps[] из @cloud-ru/ds-tree).
• menuTitle — заголовок меню.
• selected / onSelect — выбранный узел и колбэк выбора.
• isMenuOpen / onMenuToggle / defaultMenuOpened — управление раскрытием (в popover). В контролируемом режиме onMenuToggle обязателен.
• enableShrinkMenuButton — кнопка «Свернуть всё».
• withDefaultOpenedMenuList — раскрыть пункты меню по умолчанию.

Контент

• content — контентная часть страницы.
• contentClassName — класс контейнера контента.

Установка

pnpm add @cloud-ru/ds-uikit-product-page-layout

import { TreeNavigation, TREE_NAVIGATION_MODE } from '@cloud-ru/ds-uikit-product-page-layout'

Props

Types

TreeNavigationProps

Unions

TreeNavigationMode

Related props

StatusProps

TreeNodeId

TreeNodeProps

Storybook

Figma