@gravity-ui/navigation 6.1.2 → 6.3.0

package/README.md

@@ -16,6 +16,38 @@ Ensure that peer dependencies are installed in your project
 npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/classname@^1.6.0 react@^19.0.0 react-dom@^19.0.0
 ```
 
+## Usage
+
+Render `AsideHeader` as the app shell. It is a controlled component — you own the collapsed state via `compact`/`onChangeCompact` — and your page content goes through `renderContent`. Set up `@gravity-ui/uikit` styles and `ThemeProvider` first (see the [uikit styles guide](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)).
+
+```tsx
+import React from 'react';
+import {AsideHeader} from '@gravity-ui/navigation';
+import {Gear, House} from '@gravity-ui/icons';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/styles.css';
+
+export function App() {
+  const [compact, setCompact] = React.useState(false);
+
+  return (
+    <ThemeProvider theme="light">
+      <AsideHeader
+        logo={{text: 'My App', href: '/'}}
+        compact={compact}
+        onChangeCompact={setCompact}
+        menuItems={[
+          {id: 'home', title: 'Home', icon: House, current: true},
+          {id: 'settings', title: 'Settings', icon: Gear},
+        ]}
+        renderContent={() => <main>Page content</main>}
+      />
+    </ThemeProvider>
+  );
+}
+```
+
 ## Sandboxes
 
 Basic
@@ -54,3 +86,35 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh
 ## CSS API
 
 Used for themization Navigation's components
+
+## License
+
+Distributed under the MIT License. See [LICENSE](LICENSE) for details.
+
+## For AI agents
+
+Application-shell navigation components for Gravity UI apps — the collapsible `AsideHeader` sidebar plus footers, drawers, logo, hotkeys and settings panels that frame a whole page.
+
+### When to use
+
+- The app's primary navigation frame: `AsideHeader` (collapsible side navigation) with `menuItems`, subheader, and footer sections.
+- Supporting shell UI: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`.
+- Laying out page content inside the navigation frame via `renderContent` / `PageLayout`.
+
+### When not to use
+
+- Generic in-page controls (buttons, tabs, menus, breadcrumbs) — use [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); this package is the outer app chrome, not general components.
+- Rendering the page body itself from config — use [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor).
+- Client-side routing — this provides the navigation UI only; wire clicks to your own router.
+
+### Common pitfalls
+
+- **`AsideHeader` is controlled.** You must own the collapsed state with `compact` and update it in `onChangeCompact`; passing `compact` without the handler freezes the sidebar.
+- **Menu items are `menuItems`, keyed by `id`.** Each item is `{id, title, icon, current, onItemClick}`; `icon` takes an icon component (e.g. from `@gravity-ui/icons`), not a string name.
+- **Peer dependencies are required.** `@gravity-ui/uikit`, `@gravity-ui/icons`, and `@bem-react/classname` must be installed alongside `react`/`react-dom`.
+- **Needs uikit setup.** Render inside `ThemeProvider` and import `@gravity-ui/uikit/styles/styles.css`, or the shell renders unstyled.
+- **Page content goes through `renderContent`.** Render your routed content via the `renderContent` prop / `PageLayout`, not as `children`.
+
+## Documentation for AI agents
+
+Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`.

package/build/cjs/components/AsideHeader/components/FirstPanel.js

@@ -17,7 +17,7 @@ var Panels = require('./Panels.js');
 
 const MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';
 const FirstPanel = React.forwardRef((_props, ref) => {
-    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, qa, } = AsideHeaderContext.useAsideHeaderInnerContext();
+    const { size, onItemClick, headerDecoration, menuMoreTitle, onMenuMoreClick, renderFooter, compact, customBackground, customBackgroundClassName, className, hideCollapseButton, menuGroups, menuOverflow, collapsedMenuGroupIds, defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed, aboveMenuContent, qa, } = AsideHeaderContext.useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems.useVisibleMenuItems();
     const asideRef = React.useRef(null);
     React.useEffect(() => {
@@ -29,6 +29,7 @@ const FirstPanel = React.forwardRef((_props, ref) => {
             customBackground && (React.createElement("div", { className: utils.b('aside-custom-background', customBackgroundClassName) }, customBackground)),
             React.createElement("div", { className: utils.b('aside-content', { ['with-decoration']: headerDecoration }) },
                 React.createElement(Header.Header, null),
+                aboveMenuContent,
                 (visibleMenuItems === null || visibleMenuItems === undefined ? undefined : visibleMenuItems.length) ? (React.createElement(CompositeBar.CompositeBar, { menuItemClassName: utils.b('menu-item'), compositeId: MENU_ITEMS_COMPOSITE_ID, type: "menu", compact: compact, items: visibleMenuItems, menuGroups: menuGroups, menuMoreTitle: menuMoreTitle !== null && menuMoreTitle !== undefined ? menuMoreTitle : index.default('label_more'), onItemClick: onItemClick, onMoreClick: onMenuMoreClick, menuOverflow: menuOverflow, collapsedMenuGroupIds: collapsedMenuGroupIds, defaultCollapsedMenuGroupIds: defaultCollapsedMenuGroupIds, onToggleMenuGroupCollapsed: onToggleMenuGroupCollapsed })) : (React.createElement("div", { className: utils.b('menu-items') })),
                 React.createElement("div", { className: utils.b('footer') }, renderFooter === null || renderFooter === undefined ? undefined : renderFooter({
                     size,

package/build/cjs/components/AsideHeader/components/FirstPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuOverflow,\n        collapsedMenuGroupIds,\n        defaultCollapsedMenuGroupIds,\n        onToggleMenuGroupCollapsed,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={b(\n                    'aside',\n                    {'menu-overflow-scroll': menuOverflow === 'scroll' && !compact},\n                    className,\n                )}\n                style={{width: size}}\n                data-qa={qa}\n            >\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            menuOverflow={menuOverflow}\n                            collapsedMenuGroupIds={collapsedMenuGroupIds}\n                            defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n                            onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["useAsideHeaderInnerContext","useVisibleMenuItems","useRef","setRef","b","Header","CompositeBar","i18n","CollapseButton","Panels"],"mappings":"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"}
+{"version":3,"file":"FirstPanel.js","sources":["../../../../../../src/components/AsideHeader/components/FirstPanel.tsx"],"sourcesContent":["import React, {useRef} from 'react';\n\nimport {setRef} from '@gravity-ui/uikit';\n\nimport {useAsideHeaderInnerContext} from '../AsideHeaderContext';\nimport i18n from '../i18n';\nimport {b} from '../utils';\n\nimport {useVisibleMenuItems} from './AllPagesPanel';\nimport {CollapseButton} from './CollapseButton/CollapseButton';\nimport {CompositeBar} from './CompositeBar';\nimport {Header} from './Header';\nimport {Panels} from './Panels';\n\nconst MENU_ITEMS_COMPOSITE_ID = 'gravity-ui/navigation-menu-items-composite-bar';\n\nexport const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {\n    const {\n        size,\n        onItemClick,\n        headerDecoration,\n        menuMoreTitle,\n        onMenuMoreClick,\n        renderFooter,\n        compact,\n        customBackground,\n        customBackgroundClassName,\n        className,\n        hideCollapseButton,\n        menuGroups,\n        menuOverflow,\n        collapsedMenuGroupIds,\n        defaultCollapsedMenuGroupIds,\n        onToggleMenuGroupCollapsed,\n        aboveMenuContent,\n        qa,\n    } = useAsideHeaderInnerContext();\n    const visibleMenuItems = useVisibleMenuItems();\n\n    const asideRef = useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        setRef<HTMLDivElement>(ref, asideRef.current);\n    }, [ref]);\n\n    return (\n        <React.Fragment>\n            <div\n                className={b(\n                    'aside',\n                    {'menu-overflow-scroll': menuOverflow === 'scroll' && !compact},\n                    className,\n                )}\n                style={{width: size}}\n                data-qa={qa}\n            >\n                <div className={b('aside-popup-anchor')} ref={asideRef} />\n                {customBackground && (\n                    <div className={b('aside-custom-background', customBackgroundClassName)}>\n                        {customBackground}\n                    </div>\n                )}\n\n                <div className={b('aside-content', {['with-decoration']: headerDecoration})}>\n                    <Header />\n                    {aboveMenuContent}\n                    {visibleMenuItems?.length ? (\n                        <CompositeBar\n                            menuItemClassName={b('menu-item')}\n                            compositeId={MENU_ITEMS_COMPOSITE_ID}\n                            type=\"menu\"\n                            compact={compact}\n                            items={visibleMenuItems}\n                            menuGroups={menuGroups}\n                            menuMoreTitle={menuMoreTitle ?? i18n('label_more')}\n                            onItemClick={onItemClick}\n                            onMoreClick={onMenuMoreClick}\n                            menuOverflow={menuOverflow}\n                            collapsedMenuGroupIds={collapsedMenuGroupIds}\n                            defaultCollapsedMenuGroupIds={defaultCollapsedMenuGroupIds}\n                            onToggleMenuGroupCollapsed={onToggleMenuGroupCollapsed}\n                        />\n                    ) : (\n                        <div className={b('menu-items')} />\n                    )}\n                    <div className={b('footer')}>\n                        {renderFooter?.({\n                            size,\n                            compact: Boolean(compact),\n                            asideRef,\n                        })}\n                    </div>\n                    {!hideCollapseButton && <CollapseButton />}\n                </div>\n            </div>\n            <Panels />\n        </React.Fragment>\n    );\n});\n\nFirstPanel.displayName = 'FirstPanel';\n"],"names":["useAsideHeaderInnerContext","useVisibleMenuItems","useRef","setRef","b","Header","CompositeBar","i18n","CollapseButton","Panels"],"mappings":"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"}

package/build/cjs/components/AsideHeader/types.d.ts

@@ -63,6 +63,7 @@ interface AsideHeaderGeneralProps extends QAProps {
     onMenuMoreClick?: () => void;
     onAllPagesClick?: () => void;
     openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;
+    aboveMenuContent?: React.ReactNode;
 }
 interface AsideHeaderDefaultProps {
     panelItems?: PanelItemProps[];

package/build/cjs/components/AsideHeader/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n    /**\n     * Fired when visibility of a menu group is toggled from the All pages panel (pin on group header).\n     * Use with `onMenuGroupsChanged` / controlled `menuGroups`.\n     */\n    onToggleMenuGroup?: (changedGroup: MenuGroup) => void;\n}\n\n/**\n * Menu overflow behavior.\n * - `collapse` — extra items collapse under a \"More\" popup (default).\n * - `scroll` — all items remain visible inside a scrollable container with a native thin scrollbar.\n *\n * In compact mode the menu always falls back to `collapse` regardless of this value\n * because a scrollbar over icon-only items is awkward.\n */\nexport type AsideHeaderMenuOverflow = 'collapse' | 'scroll';\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    /**\n     * @see AsideHeaderMenuOverflow\n     * @default 'collapse'\n     */\n    menuOverflow?: AsideHeaderMenuOverflow;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    /**\n     * Called only from **All pages** edit mode when the user toggles visibility of a **menu group** (group header pin), updating `menuGroup.hidden`.\n     * Use with controlled `menuGroups`; not emitted for programmatic `menuGroups` changes outside All pages.\n     */\n    onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void;\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n    /**\n     * When provided, the map is the source of truth for which menu groups are collapsed\n     * in inline (`menuOverflow: 'scroll'`) layout. Keys are `MenuGroup.id`, values mean collapsed.\n     */\n    collapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Initial collapsed state for groups when `collapsedMenuGroupIds` is not controlled.\n     */\n    defaultCollapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Called when the user toggles a group in inline layout. The parent should update\n     * `collapsedMenuGroupIds` when using controlled mode.\n     */\n    onToggleMenuGroupCollapsed?: (groupId: string) => void;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\n/** Menu item id for the All pages row (same value as {@link InnerPanels.AllPages}). */\nexport const ALL_PAGES_ID = InnerPanels.AllPages;\n\nexport interface AsideHeaderItem extends MenuItem {\n    /**\n     * @internal CompositeBar: group children rendered from the \"More\" overflow popover.\n     */\n    compositeBarMenuPopupItems?: AsideHeaderItem[];\n    /**\n     * @internal CompositeBar: optional heading in the overflow popover for a group row.\n     */\n    compositeBarMenuPopupTitle?: string;\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":["InnerPanels"],"mappings":";;AAoHYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,GAEtB,EAAA,CAAA,CAAA;AAED;AACa,MAAA,YAAY,GAAGA,mBAAW,CAAC;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../src/components/AsideHeader/types.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {DrawerProps, PopupProps, QAProps} from '@gravity-ui/uikit';\n\nimport {RenderContentType} from '../Content';\nimport {LogoProps, MenuGroup, MenuItem, OpenModalSubscriber, TopAlertProps} from '../types';\n\nimport {AsideHeaderContextType} from './AsideHeaderContext';\n\nexport interface PanelItemProps extends DrawerProps {\n    id: string;\n}\n\nexport interface LayoutProps {\n    compact: boolean;\n    className?: string;\n    topAlert?: TopAlertProps;\n}\n\ninterface EditMenuProps {\n    onOpenEditMode?: () => void;\n    onToggleMenuItem?: (changedItem: AsideHeaderItem) => void;\n    onResetSettingsToDefault?: () => void;\n    enableSorting?: boolean;\n    onChangeItemsOrder?: (changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;\n    /**\n     * Fired when visibility of a menu group is toggled from the All pages panel (pin on group header).\n     * Use with `onMenuGroupsChanged` / controlled `menuGroups`.\n     */\n    onToggleMenuGroup?: (changedGroup: MenuGroup) => void;\n}\n\n/**\n * Menu overflow behavior.\n * - `collapse` — extra items collapse under a \"More\" popup (default).\n * - `scroll` — all items remain visible inside a scrollable container with a native thin scrollbar.\n *\n * In compact mode the menu always falls back to `collapse` regardless of this value\n * because a scrollbar over icon-only items is awkward.\n */\nexport type AsideHeaderMenuOverflow = 'collapse' | 'scroll';\n\ninterface AsideHeaderGeneralProps extends QAProps {\n    logo?: LogoProps;\n    className?: string;\n    collapseTitle?: string;\n    expandTitle?: string;\n    menuMoreTitle?: string;\n    /**\n     * @see AsideHeaderMenuOverflow\n     * @default 'collapse'\n     */\n    menuOverflow?: AsideHeaderMenuOverflow;\n    topAlert?: TopAlertProps;\n    customBackground?: React.ReactNode;\n    customBackgroundClassName?: string;\n    hideCollapseButton?: boolean;\n    renderContent?: RenderContentType;\n    renderFooter?: (data: {\n        size: number;\n        compact: boolean;\n        asideRef: React.RefObject<HTMLDivElement>;\n    }) => React.ReactNode;\n    collapseButtonWrapper?: (\n        defaultButton: React.ReactNode,\n        data: {\n            compact: boolean;\n            onChangeCompact?: (compact: boolean) => void;\n        },\n    ) => React.ReactNode;\n    editMenuProps?: EditMenuProps;\n    onClosePanel?: () => void;\n    onChangeCompact?: (compact: boolean) => void;\n    onMenuMoreClick?: () => void;\n    onAllPagesClick?: () => void;\n    openModalSubscriber?: (subscriber: OpenModalSubscriber) => void;\n    aboveMenuContent?: React.ReactNode;\n}\n\ninterface AsideHeaderDefaultProps {\n    panelItems?: PanelItemProps[];\n    subheaderItems?: AsideHeaderItem[];\n    menuItems?: AsideHeaderItem[];\n    menuGroups?: MenuGroup[];\n    /**\n     * Called only from **All pages** edit mode when the user toggles visibility of a **menu group** (group header pin), updating `menuGroup.hidden`.\n     * Use with controlled `menuGroups`; not emitted for programmatic `menuGroups` changes outside All pages.\n     */\n    onMenuGroupsChanged?: (menuGroups: MenuGroup[]) => void;\n    defaultMenuItems?: AsideHeaderItem[];\n    onMenuItemsChanged?: (items: AsideHeaderItem[]) => void;\n    headerDecoration?: boolean;\n    /**\n     * When provided, the map is the source of truth for which menu groups are collapsed\n     * in inline (`menuOverflow: 'scroll'`) layout. Keys are `MenuGroup.id`, values mean collapsed.\n     */\n    collapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Initial collapsed state for groups when `collapsedMenuGroupIds` is not controlled.\n     */\n    defaultCollapsedMenuGroupIds?: Record<string, boolean>;\n    /**\n     * Called when the user toggles a group in inline layout. The parent should update\n     * `collapsedMenuGroupIds` when using controlled mode.\n     */\n    onToggleMenuGroupCollapsed?: (groupId: string) => void;\n}\n\nexport type AsideHeaderInnerProps = AsideHeaderGeneralProps &\n    AsideHeaderDefaultProps &\n    AsideHeaderContextType;\n\nexport interface AsideHeaderProps\n    extends AsideHeaderGeneralProps,\n        LayoutProps,\n        Partial<AsideHeaderDefaultProps> {}\n\nexport enum InnerPanels {\n    AllPages = 'all-pages',\n}\n\n/** Menu item id for the All pages row (same value as {@link InnerPanels.AllPages}). */\nexport const ALL_PAGES_ID = InnerPanels.AllPages;\n\nexport interface AsideHeaderItem extends MenuItem {\n    /**\n     * @internal CompositeBar: group children rendered from the \"More\" overflow popover.\n     */\n    compositeBarMenuPopupItems?: AsideHeaderItem[];\n    /**\n     * @internal CompositeBar: optional heading in the overflow popover for a group row.\n     */\n    compositeBarMenuPopupTitle?: string;\n    enableTooltip?: boolean;\n    onItemClick?: (\n        item: AsideHeaderItem,\n        collapsed: boolean,\n        event: React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => void;\n    bringForward?: boolean;\n    compact?: boolean;\n\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupVisible?: PopupProps['open'];\n    /**\n     * Floating element anchor ref object\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupRef?: React.RefObject<HTMLElement>;\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupPlacement?: PopupProps['placement'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupOffset?: PopupProps['offset'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    popupKeepMounted?: PopupProps['keepMounted'];\n    /**\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    renderPopupContent?: () => React.ReactNode;\n    /**\n     * This callback will be called when Escape key pressed on keyboard, or click outside was made\n     * This behaviour could be disabled with `disableEscapeKeyDown`\n     * and `disableOutsideClick` options\n     *\n     * @deprecated Use itemWrapper instead for popup functionality\n     */\n    onOpenChangePopup?: PopupProps['onOpenChange'];\n}\n"],"names":["InnerPanels"],"mappings":";;AAqHYA;AAAZ,CAAA,UAAY,WAAW,EAAA;AACnB,IAAA,WAAA,CAAA,UAAA,CAAA,GAAA,WAAsB;AAC1B,CAAC,EAFWA,mBAAW,KAAXA,mBAAW,GAEtB,EAAA,CAAA,CAAA;AAED;AACa,MAAA,YAAY,GAAGA,mBAAW,CAAC;;;;"}

package/build/docs/INDEX.md

@@ -0,0 +1,89 @@
+# @gravity-ui/navigation documentation
+
+Documentation for the **installed** version of `@gravity-ui/navigation`.
+Your training data may be outdated — these files are the source of truth.
+
+Paths are relative to this file (`node_modules/@gravity-ui/navigation/build/docs/`).
+
+## For AI agents
+
+Application-shell navigation components for Gravity UI apps — the collapsible `AsideHeader` sidebar plus footers, drawers, logo, hotkeys and settings panels that frame a whole page.
+
+### When to use
+
+- The app's primary navigation frame: `AsideHeader` (collapsible side navigation) with `menuItems`, subheader, and footer sections.
+- Supporting shell UI: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`.
+- Laying out page content inside the navigation frame via `renderContent` / `PageLayout`.
+
+### When not to use
+
+- Generic in-page controls (buttons, tabs, menus, breadcrumbs) — use [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); this package is the outer app chrome, not general components.
+- Rendering the page body itself from config — use [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor).
+- Client-side routing — this provides the navigation UI only; wire clicks to your own router.
+
+### Common pitfalls
+
+- **`AsideHeader` is controlled.** You must own the collapsed state with `compact` and update it in `onChangeCompact`; passing `compact` without the handler freezes the sidebar.
+- **Menu items are `menuItems`, keyed by `id`.** Each item is `{id, title, icon, current, onItemClick}`; `icon` takes an icon component (e.g. from `@gravity-ui/icons`), not a string name.
+- **Peer dependencies are required.** `@gravity-ui/uikit`, `@gravity-ui/icons`, and `@bem-react/classname` must be installed alongside `react`/`react-dom`.
+- **Needs uikit setup.** Render inside `ThemeProvider` and import `@gravity-ui/uikit/styles/styles.css`, or the shell renders unstyled.
+- **Page content goes through `renderContent`.** Render your routed content via the `renderContent` prop / `PageLayout`, not as `children`.
+
+## Install
+
+```bash
+npm install @gravity-ui/navigation
+```
+
+Ensure that peer dependencies are installed in your project
+
+```bash
+npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/classname@^1.6.0 react@^19.0.0 react-dom@^19.0.0
+```
+
+## Usage
+
+Render `AsideHeader` as the app shell. It is a controlled component — you own the collapsed state via `compact`/`onChangeCompact` — and your page content goes through `renderContent`. Set up `@gravity-ui/uikit` styles and `ThemeProvider` first (see the [uikit styles guide](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)).
+
+```tsx
+import React from 'react';
+import {AsideHeader} from '@gravity-ui/navigation';
+import {Gear, House} from '@gravity-ui/icons';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/styles.css';
+
+export function App() {
+  const [compact, setCompact] = React.useState(false);
+
+  return (
+    <ThemeProvider theme="light">
+      <AsideHeader
+        logo={{text: 'My App', href: '/'}}
+        compact={compact}
+        onChangeCompact={setCompact}
+        menuItems={[
+          {id: 'home', title: 'Home', icon: House, current: true},
+          {id: 'settings', title: 'Settings', icon: Gear},
+        ]}
+        renderContent={() => <main>Page content</main>}
+      />
+    </ThemeProvider>
+  );
+}
+```
+
+## Components
+
+- [ActionBar](./components/ActionBar.md) — The component is a flexible horizontal bar that provides a standardized layout for arranging navigation elements, actions, and informational content within an application. It serves as a container for organizing UI elements like breadcrumbs, buttons, and dropdown menus into defined sections and groups.
+- [AsideHeader](./components/AsideHeader.md) — AsideHeader is provided a flexible and customizable navigation experience within your application. Users can easily customize the appearance of the sidebar to match their branding colors also to add personalized links, icons that cater specifically to their application's functionality.
+- [AsideHeader/components/AllPagesPanel](./components/AsideHeader/components/AllPagesPanel.md) — A navigation panel for managing and organizing application pages in the middle (menuItems) section of AsideHeader component. Panel provides drag-and-drop reordering, visibility toggles, pin/unpin and category grouping of menu items.
+- [Footer](./components/Footer.md) — The page footer components. Use Footer for the desktop version and MobileFooter for the mobile version. Both components have the same properties.
+- [HotkeysPanel](./components/HotkeysPanel.md) — A navigation panel for hotkeys documentation. The panel displays a set of hotkeys for your application with a description of their purpose.
+- [Logo](./components/Logo.md) — Logo icon is wrapped in UIKit Button, text is wrapped in HTML tag a or div, when passing hasWrapper prop.
+- [MobileHeader](./components/MobileHeader.md) — Header for Mobile navigation. MobileHeader provides maintaining Panels except for Modals.
+- [Settings](./components/Settings.md) — The Settings component provides the layout for a settings panel with the following features.
+
+## Hooks
+
+- [useOverflowingHorizontalListItems](./hooks/useOverflowingHorizontalListItems.md) — A hook for determining which horizontal list items stay visible and which collapse into an overflow "more" dropdown.

package/build/docs/components/ActionBar.md

@@ -0,0 +1,152 @@
+# ActionBar
+
+The component is a flexible horizontal bar that provides a standardized layout for arranging navigation elements, actions, and informational content within an application. It serves as a container for organizing UI elements like breadcrumbs, buttons, and dropdown menus into defined sections and groups.
+
+## Usage
+
+```typescript jsx
+import {Button} from '@gravity-ui/uikit';
+import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy';
+import {ActionBar} from '@gravity-ui/navigation';
+
+function Page() {
+  return (
+    <ActionBar aria-label="Actions bar">
+      <ActionBar.Section>
+        <ActionBar.Group>
+          <ActionBar.Item>
+            <LegacyBreadcrumbs
+              lastDisplayedItemsCount={1}
+              firstDisplayedItemsCount={1}
+              items={[{text: 'Root Item', action() {}}]}
+            />
+          </ActionBar.Item>
+        </ActionBar.Group>
+
+        <ActionBar.Group pull="right">
+          <ActionBar.Item>
+            <Button>Do something</Button>
+          </ActionBar.Item>
+        </ActionBar.Group>
+      </ActionBar.Section>
+    </ActionBar>
+  );
+}
+```
+
+The `ActionBar` provides several nested components that work together to create a structured layout: `ActionBar.Section`, `ActionBar.Group`, `ActionBar.Item`, `ActionBar.Separator`.
+
+## Properties
+
+| Name       | Description                                |         Type          | Default |
+| :--------- | :----------------------------------------- | :-------------------: | :-----: |
+| aria-label | HTML `aria-label` attribute                |       `string`        |         |
+| className  | HTML `class` attribute                     |       `string`        |         |
+| style      | HTML `style` attribute                     | `React.CSSProperties` |         |
+| qa         | `data-qa` HTML attribute, used for testing |       `string`        |         |
+
+## ActionBar.Section
+
+Decorative component to visually separate different kinds of navigation.
+There is two kinds of sections presented — `primary` and `secondary`. We recommend an app to have at least `primary`
+section. `secondary` could be used for app specific controls, that should be accented with smaller paddings and
+horizontal separator from `primary` section.
+
+### Properties
+
+| Name      | Description                                      |            Type            |   Default   |
+| :-------- | :----------------------------------------------- | :------------------------: | :---------: |
+| type      | Type specifies the visual styling of the section | `"primary"`, `"secondary"` | `"primary"` |
+| className | HTML `class` attribute                           |          `string`          |             |
+| style     | HTML `style` attribute                           |   `React.CSSProperties`    |             |
+| qa        | `data-qa` HTML attribute, used for testing       |          `string`          |             |
+
+```tsx
+import {Button} from '@gravity-ui/uikit';
+import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy';
+import {ActionBar} from '@gravity-ui/navigation';
+
+<ActionBar aria-label="Actions bar">
+  <ActionBar.Section type="secondary">
+    <ActionBar.Group>
+      <ActionBar.Item>
+        <Button>Toggle Article TOC</Button>
+      </ActionBar.Item>
+    </ActionBar.Group>
+  </ActionBar.Section>
+
+  <ActionBar.Section type="primary">
+    <ActionBar.Group>
+      <ActionBar.Item>
+        <LegacyBreadcrumbs
+          lastDisplayedItemsCount={1}
+          firstDisplayedItemsCount={1}
+          items={[
+            {text: 'Wiki Main Page', action() {}},
+            {text: 'Wiki Article', action() {}},
+          ]}
+        />
+      </ActionBar.Item>
+    </ActionBar.Group>
+  </ActionBar.Section>
+</ActionBar>;
+```
+
+## ActionBar.Group
+
+Groups organize `ActionBar.Item` within a section and control their alignment.
+
+### Properties
+
+| Name             | Description                                                       |                                      Type                                       | Default |
+| :--------------- | :---------------------------------------------------------------- | :-----------------------------------------------------------------------------: | :-----: |
+| pull             | Controls the alignment of the group                               | `"left"`, `"left-grow"`, `"right"`, `"right-grow"`, `"center"`, `"center-grow"` |         |
+| stretchContainer | Set `flex-grow: 1` for Group. Need to support UIKit@7 Breadcrumbs |                                    `boolean`                                    |         |
+| className        | HTML `class` attribute                                            |                                    `string`                                     |         |
+| style            | HTML `style` attribute                                            |                              `React.CSSProperties`                              |         |
+| qa               | `data-qa` HTML attribute, used for testing                        |                                    `string`                                     |         |
+
+## ActionBar.Item
+
+Container for UI elements like buttons, breadcrumbs or other components must be in `ActionBar.Group`. The component adds margins between items.
+
+### Properties
+
+| Name      | Description                                |         Type          | Default |
+| :-------- | :----------------------------------------- | :-------------------: | :-----: |
+| spacing   | Enable spacing with previous item          |       `boolean`       | `true`  |
+| className | HTML `class` attribute                     |       `string`        |         |
+| style     | HTML `style` attribute                     | `React.CSSProperties` |         |
+| qa        | `data-qa` HTML attribute, used for testing |       `string`        |         |
+
+## ActionBar.Separator
+
+Visual divider that can be placed between items in a group to separate them visually.
+
+### Example
+
+```typescript jsx
+import {Button} from '@gravity-ui/uikit';
+import {Breadcrumbs as LegacyBreadcrumbs} from '@gravity-ui/uikit/legacy';
+import {ActionBar} from '@gravity-ui/navigation';
+
+function Page() {
+  return (
+    <ActionBar aria-label="Actions bar">
+      <ActionBar.Section>
+        <ActionBar.Group pull="right">
+          <ActionBar.Item>
+            <Button>Do something</Button>
+          </ActionBar.Item>
+
+          <ActionBar.Separator />
+
+          <ActionBar.Item>
+            <Button>Do something</Button>
+          </ActionBar.Item>
+        </ActionBar.Group>
+      </ActionBar.Section>
+    </ActionBar>
+  );
+}
+```

package/build/docs/components/AsideHeader/components/AllPagesPanel.md

@@ -0,0 +1,80 @@
+# AllPagesPanel
+
+A navigation panel for managing and organizing application pages in the middle (menuItems) section of `AsideHeader` component. Panel provides drag-and-drop reordering, visibility toggles, pin/unpin and category grouping of menu items.
+
+## Usage
+
+```tsx
+import React from 'react';
+import {AsideHeader, type AsideHeaderProps} from '@gravity-ui/navigation';
+
+const DEFAULT_MENU_ITEMS: AsideHeaderProps['menuItems'] = [
+  {item: {id: 'home', title: 'Home', icon: 'home'}},
+  {item: {id: 'analytics', title: 'Analytics', icon: 'chart'}},
+  {item: {id: 'settings', title: 'Settings', icon: 'gear'}},
+];
+
+const Navigation: React.FC<React.PropsWithChildren> = ({children}) => {
+  const {defaultMenuItems, menuItems, setMenuItems} = useMenuItems();
+
+  return (
+    <AsideHeader
+      className={b()}
+      logo={{
+        icon: GravityLogo,
+        iconSize: 30,
+        text: 'Gravity App',
+        href: '#',
+      }}
+      menuItems={menuItems}
+      compact={compact}
+      onChangeCompact={setCompact}
+      renderContent={() => children}
+      // All pages
+      defaultMenuItems={defaultMenuItems}
+      editMenuProps={{enableSorting: true}}
+      onMenuItemsChanged={setMenuItems}
+    />
+  );
+};
+
+const useMenuItems = () => {
+  const location = useLocation();
+
+  const [menuItems, setMenuItems] = React.useState(DEFAULT_MENU_ITEMS);
+
+  const currentMenuItems = menuItems.map<AsideHeaderItem>((item, index) => {
+    if ('type' in item || index > 5) {
+      return item;
+    }
+
+    return {
+      ...item,
+      current: (item.href || '') === location.pathname,
+    };
+  });
+
+  return {defaultMenuItems: DEFAULT_MENU_ITEMS, menuItems: currentMenuItems, setMenuItems};
+};
+```
+
+## Properties
+
+| Name               | Description                                                                    |                                                             Type                                                             | Default |
+| :----------------- | :----------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------: | :-----: |
+| defaultMenuItems   | Default items in the navigation middle section                                 | [`Array<AsideHeaderItem>`](https://github.com/gravity-ui/navigation/blob/main/src/components/AsideHeader/README.md#menuitem) |  `[]`   |
+| menuItems          | Modifying items in the navigation middle section                               | [`Array<AsideHeaderItem>`](https://github.com/gravity-ui/navigation/blob/main/src/components/AsideHeader/README.md#menuitem) |  `[]`   |
+| editMenuProps      | desc                                                                           |                                                            `type`                                                            |         |
+| onMenuItemsChanged | Callback will be called when updating list of the menuItems in `AllPagesPanel` |                                          `(items: Array<AsideHeaderItem>) => void`                                           |         |
+
+### `EditMenuProps`
+
+Provides settings and callbacks for managing panel and menu items in the `AsideHeader`. Callbacks are optional, you can managing with `AsideHeader.onMenuItemsChanged` prop.
+
+| Name                     | Description                                              |                                     Type                                      | Default |
+| :----------------------- | :------------------------------------------------------- | :---------------------------------------------------------------------------: | :-----: |
+| enableSorting            | Enable sorting functionality in the panel                |                                   `boolean`                                   |         |
+| onOpenEditMode           | Callback triggered when the edit mode is enabled         |                                 `() => void`                                  |         |
+| onToggleMenuItem         | Callback triggered when the menu item visible is toggled |                   `(changedItem: AsideHeaderItem) => void`                    |         |
+| onResetSettingsToDefault | Callback triggered when settings are reset to default    |                                 `() => void`                                  |         |
+| onChangeItemsOrder       | Callback triggered when the order of items is changed    | `(changedItem: AsideHeaderItem, oldIndex: number, newIndex: number) => void;` |         |