gravity-ui · kkirik · Jan 14, 2026 · Dec 30, 2025 · Jan 5, 2026 · Jan 5, 2026
@@ -8,9 +8,13 @@ $block: '.#{variables.$ns}aside-header';
 
 #{$block} {
     $class: &;
-    --gn-aside-header-min-width: 56px;
+    --gn-aside-header-min-width: #{variables.$aside-header-min-width};
+
+    --_--item-height: #{variables.$item-height};
+    --_--item-margin-inline: #{variables.$item-margin-inline};
+    --gn-aside-header-item-expanded-radius: #{variables.$item-expanded-radius};
+    --gn-aside-header-header-divider-height: #{variables.$header-divider-height};
 
-    --_--item-icon-background-size: 36px;
     --_--background-color: var(--g-color-base-background);
     --_--decoration-collapsed-background-color: var(--g-color-base-warning-light);
     --_--decoration-expanded-background-color: var(--g-color-base-warning-light);
@@ -102,6 +106,15 @@ $block: '.#{variables.$ns}aside-header';
 
             z-index: -1;
         }
+
+        &_compact-mode {
+            --_--item-height: #{variables.$item-height-compact};
+            --_--item-margin-inline: #{variables.$item-margin-inline-compact};
+            --_--item-collapsed-radius: #{variables.$item-expanded-radius-compact};
+            --gn-aside-header-item-expanded-radius: #{variables.$item-expanded-radius-compact};
+            --gn-aside-header-header-divider-height: #{variables.$header-divider-height-compact};
+            --gn-aside-header-min-width: #{variables.$aside-header-min-width-compact};
+        }
     }
 
     &_collapsed &__aside {
@@ -142,15 +155,13 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &__header {
-        --gn-aside-header-header-divider-height: 29px;
-
         position: relative;
         z-index: 1;
         flex: none;
         box-sizing: border-box;
         width: calc(100%);
         padding-top: 8px;
-        padding-bottom: 22px;
+        padding-bottom: 25px;
         background-color: var(--gn-aside-top-decoration-background-color);
 
         #{$class}__header-divider {
@@ -222,7 +233,8 @@ $block: '.#{variables.$ns}aside-header';
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-inline: 10px;
+        margin-inline: var(--_--item-margin-inline);
+        margin-bottom: 2px;
 
         &_without-logo {
             padding-bottom: var(--g-spacing-2);
@@ -232,24 +244,21 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &__logo-button &__logo-icon-place {
-        height: var(
-            --gn-aside-header-item-icon-background-size,
-            var(--_--item-icon-background-size)
-        );
-        width: var(--_--item-icon-background-size);
+        height: var(--_--item-height);
+        width: var(--_--item-height);
     }
 
     &__menu-items {
         flex-grow: 1;
     }
 
     &__menu-item:not(:has([data-type='action'])) {
-        margin-inline: 10px;
+        margin-inline: var(--_--item-margin-inline);
     }
 
     &__footer {
         flex-shrink: 0;
-        margin: var(--g-spacing-2) 10px;
+        margin: var(--g-spacing-2) var(--_--item-margin-inline);
         display: flex;
         flex-direction: column;
         background-color: var(--gn-aside-bottom-background-color);

@@ -5,15 +5,16 @@ import {PageLayoutAside} from './components/PageLayout/PageLayoutAside';
 import {AsideHeaderProps} from './types';
 
 export const AsideHeader = React.forwardRef<HTMLDivElement, AsideHeaderProps>(
-    ({pinned, className, topAlert, ...props}, ref) => {
+    ({pinned, className, topAlert, isCompactMode, ...props}, ref) => {
         return (
             <PageLayout
                 pinned={pinned}
                 onChangePinned={props.onChangePinned}
                 className={className}
                 topAlert={topAlert}
+                isCompactMode={isCompactMode}
             >
-                <PageLayoutAside ref={ref} {...props} />
+                <PageLayoutAside ref={ref} {...props} isCompactMode={isCompactMode} />
                 <PageLayout.Content renderContent={props.renderContent} />
             </PageLayout>
         );

@@ -173,6 +173,7 @@ export const Aside: FC = () => {
 | expandTitle               | Заголовок `CollapseButton` для разворачивания элемента навигации.                                               |                                                          `string`                                                          | `"Развернуть"` `"Expand"` |
 | headerDecoration          | Цвет фона верхнего блока с элементами логотипа и подзаголовка.                                                  |                                                         `boolean`                                                          |          `false`          |
 | hideCollapseButton        | Скрывает `CollapseButton`. Для установки дефолтного состояния элемента навигации используйте свойство `pinned`. |                                                         `boolean`                                                          |          `false`          |
+| isCompactMode             | При `true` элементы меню используют компактную высоту.                                                          |                                                         `boolean`                                                          |          `false`          |
 | logo                      | Контейнер логотипа, включающий иконку с заголовком и обрабатывающий клики.                                      |                                             [`Logo`](./../Logo/Readme.md#logo)                                             |                           |
 | menuItems                 | Элементы в среднем блоке навигации.                                                                             |                                                  `Array<AsideHeaderItem>`                                                  |           `[]`            |
 | menuMoreTitle             | Дополнительный заголовок для `menuItems`, если элементы не помещаются.                                          |                                                          `string`                                                          |     `"Ещё"` `"More"`      |

@@ -174,6 +174,7 @@ export const Aside: FC = () => {
 | expandTitle               | `CollapseButton` title for expanding navigation                                      |                                                          `string`                                                          | `"Развернуть"` `"Expand"` |
 | headerDecoration          | Color background of the top section with logo and subheader items                    |                                                         `boolean`                                                          |          `false`          |
 | hideCollapseButton        | Hiding `CollapseButton`. Use `pinned` prop for setting default navigation state      |                                                         `boolean`                                                          |          `false`          |
+| isCompactMode             | When `true`, menu items use compact height                                           |                                                         `boolean`                                                          |          `false`          |
 | logo                      | Logo container includes icon, title, handling clicks                                 |              [`Logo`](https://github.com/gravity-ui/navigation/blob/main/src/components/Logo/Readme.md#logo)               |                           |
 | menuItems                 | Items in the navigation middle section                                               |                                                  `Array<AsideHeaderItem>`                                                  |           `[]`            |
 | menuMoreTitle             | Additional element title of menuItems if elements don't fit                          |                                                          `string`                                                          |     `"Ещё"` `"More"`      |

@@ -51,9 +51,9 @@ export default {
 const ShowcaseTemplate: StoryFn = (args) => <AsideHeaderShowcase {...args} />;
 export const Showcase = ShowcaseTemplate.bind({});
 
-const CompactTemplate: StoryFn = (args) => <AsideHeaderShowcase {...args} />;
-export const Compact = CompactTemplate.bind({});
-Compact.args = {
+const CollapsedNavigationTemplate: StoryFn = (args) => <AsideHeaderShowcase {...args} />;
+export const CollapsedNavigation = CollapsedNavigationTemplate.bind({});
+CollapsedNavigation.args = {
     initialPinned: false,
     hideCollapseButton: true,
 };
@@ -334,7 +334,7 @@ const GroupedMenuCollapsibleTemplate: StoryFn = (args) => {
     const [currentMenuGroups, setCurrentMenuGroups] = React.useState(menuGroupsWithIcons);
 
     return (
-        <PageLayout pinned={pinned} onChangePinned={setPinned}>
+        <PageLayout pinned={pinned} onChangePinned={setPinned} isCompactMode={args.isCompactMode}>
             <PageLayoutAside
                 headerDecoration
                 logo={DEFAULT_LOGO}
@@ -372,6 +372,11 @@ GroupedMenuCollapsible.args = {
     initialPinned: true,
 };
 
+export const CompactItemSizing = GroupedMenuCollapsibleTemplate.bind({});
+CompactItemSizing.args = {
+    isCompactMode: true,
+};
+
 const CustomThemesWithNewColorsTemplate: StoryFn = (args) => {
     return (
         <>

@@ -43,6 +43,7 @@ export interface AsideHeaderShowcaseProps {
     customBackgroundClassName?: string;
     headerDecoration?: boolean;
     hideCollapseButton?: boolean;
+    isCompactMode?: boolean;
     externalMenuItems?: AsideHeaderProps['menuItems'];
     externalMenuGroups?: AsideHeaderProps['menuGroups'];
 }
@@ -55,6 +56,7 @@ export const AsideHeaderShowcase: React.FC<React.PropsWithChildren<AsideHeaderSh
     customBackgroundClassName,
     headerDecoration,
     hideCollapseButton,
+    isCompactMode,
     externalMenuItems,
     externalMenuGroups,
     children,
@@ -154,6 +156,7 @@ export const AsideHeaderShowcase: React.FC<React.PropsWithChildren<AsideHeaderSh
                 ]}
                 pinned={pinned}
                 hideCollapseButton={hideCollapseButton}
+                isCompactMode={isCompactMode}
                 multipleTooltip={multipleTooltip}
                 openModalSubscriber={openModalSubscriber}
                 topAlert={topAlert}

@@ -22,7 +22,7 @@ export function getAsideHeaderWrapper(
     props: AsideHeaderProps = {
         logo: {
             icon: logoIcon,
-            iconSize: 24,
+            iconSize: 32,
             text: 'My Service',
             'aria-label': 'My Service',
         },

@@ -14,8 +14,17 @@ test.describe('AsideHeader', () => {
         await expectScreenshot();
     });
 
-    test('render story: <Compact>', async ({mount, expectScreenshot}) => {
-        await mount(<AsideHeaderStories.Compact />, undefined, {
+    test('render story: <CollapsedNavigation>', async ({mount, expectScreenshot}) => {
+        await mount(<AsideHeaderStories.CollapsedNavigation />, undefined, {
+            width: 1200,
+            height: 720,
+        });
+
+        await expectScreenshot();
+    });
+
+    test('render story: <CompactItemSizing>', async ({mount, expectScreenshot}) => {
+        await mount(<AsideHeaderStories.CompactItemSizing />, undefined, {
             width: 1200,
             height: 720,
         });

@@ -5,24 +5,11 @@
     height: 100%;
     padding: var(--g-spacing-4) var(--g-spacing-6);
     box-sizing: border-box;
-    --gn-aside-header-item-expanded-radius: 6px;
+    --gn-aside-header-item-expanded-radius: #{variables.$item-expanded-radius};
+    --_--item-height: #{variables.$item-height};
 
     &__content {
         overflow: auto;
         flex: 1;
     }
-
-    &__discoverable-feature-wrapper {
-        display: flex;
-    }
-
-    &__menu-group {
-        width: 100%;
-        margin-inline: 10px;
-
-        &:not(:last-child) {
-            padding-bottom: var(--g-spacing-2);
-            border-bottom: 1px solid var(--g-color-line-generic);
-        }
-    }
 }
@@ -13,9 +13,10 @@ const b = createBlock('collapse-button', styles);
 
 interface CollapseButtonProps {
     className?: string;
+    isCompactMode?: boolean;
 }
 
-export const CollapseButton = ({className}: CollapseButtonProps) => {
+export const CollapseButton = ({className, isCompactMode}: CollapseButtonProps) => {
     const {pinned, onChangePinned} = useAsideHeaderContext();
     const {expandTitle, collapseTitle, collapseButtonWrapper} = useAsideHeaderInnerContext();
 
@@ -32,7 +33,7 @@ export const CollapseButton = ({className}: CollapseButtonProps) => {
     const defaultButton = (
         <Button
             view="flat-secondary"
-            size="l"
+            size={isCompactMode ? 'm' : 'l'}
             className={b({collapsed: !pinned}, className)}
             onClick={onCollapseButtonClick}
             aria-label={buttonTitle}

@@ -5,8 +5,6 @@ $block: '.#{variables.$ns}composite-bar';
 #{$block} {
     $class: &;
 
-    --gn-aside-header-item-expanded-radius: 6px;
-
     flex: 1 1 auto;
     width: 100%;
     min-height: 40px;
@@ -85,9 +83,8 @@ $block: '.#{variables.$ns}composite-bar';
         }
     }
 
-    &__menu-group-header,
-    &__menu-group-item {
-        height: 36px;
+    &__menu-group-header {
+        height: var(--_--item-height);
     }
 
     &__menu-group-item {
@@ -145,6 +142,6 @@ $block: '.#{variables.$ns}composite-bar';
     }
 
     &__menu-item[data-type='action'] {
-        margin-inline: 10px;
+        margin-inline: var(--_--item-margin-inline);
     }
 }
@@ -3,8 +3,8 @@ import React, {FC, ReactNode, useCallback, useContext, useRef, useState} from 'r
 import {ChevronRight} from '@gravity-ui/icons';
 import {List, ListSortParams} from '@gravity-ui/uikit';
 
-import {ASIDE_HEADER_COMPACT_WIDTH} from '../../../constants';
 import {createBlock} from '../../../utils/cn';
+import {getCollapsedWidth} from '../../../utils/getCollapsedWidth';
 import {AsideHeaderItem, MenuItemsWithGroups} from '../../types';
 import {UNGROUPED_ID} from '../AllPagesPanel/constants';
 
@@ -36,6 +36,8 @@ type CompositeBarProps = {
     menuItemClassName?: string;
     editMode?: boolean;
     onToggleGroupCollapsed?: (groupId: string) => void;
+    /** When `true`, menu items use compact height. */
+    isCompactMode?: boolean;
 };
 
 type CompositeBarViewProps = CompositeBarProps & {
@@ -51,6 +53,8 @@ type CompositeBarViewProps = CompositeBarProps & {
     onSecondLevelSortEnd?: (
         groupIndex: number,
     ) => (params: {oldIndex: number; newIndex: number}) => void;
+    /** When `true`, menu items use compact height. */
+    isCompactMode?: boolean;
 };
 
 export const CompositeBarView: FC<CompositeBarViewProps> = ({
@@ -70,6 +74,7 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
     onToggleMenuItemVisibility,
     onFirstLevelSortEnd,
     onSecondLevelSortEnd,
+    isCompactMode,
 }) => {
     const ref = useRef<List<AsideHeaderItem>>(null);
     const tooltipRef = useRef<HTMLDivElement>(null);
@@ -96,6 +101,8 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
         };
     }, [multipleTooltip, multipleTooltipActive, setMultipleTooltipContextValue]);
 
+    const collapsedWidth = getCollapsedWidth(isCompactMode);
+
     const onTooltipMouseEnter = useCallback(
         (e: {clientX: number}) => {
             if (
@@ -104,7 +111,7 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
                 !multipleTooltipActive &&
                 document.hasFocus() &&
                 activeIndex !== lastClickedItemIndex &&
-                e.clientX <= ASIDE_HEADER_COMPACT_WIDTH
+                e.clientX <= collapsedWidth
             ) {
                 setMultipleTooltipContextValue?.({
                     active: true,
@@ -117,6 +124,7 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
             multipleTooltipActive,
             activeIndex,
             lastClickedItemIndex,
+            collapsedWidth,
             setMultipleTooltipContextValue,
         ],
     );
@@ -250,8 +258,8 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
                     ref={ref}
                     items={items}
                     selectedItemIndex={type === 'menu' ? getSelectedItemIndex(items) : undefined}
-                    itemHeight={getItemHeight}
-                    itemsHeight={getItemsHeight}
+                    itemHeight={(item) => getItemHeight(item, isCompactMode)}
+                    itemsHeight={(items) => getItemsHeight(items, isCompactMode)}
                     itemClassName={b('root-menu-item', {collapsed: !isExpanded}, menuItemClassName)}
                     virtualized={false}
                     filterable={false}
@@ -339,8 +347,10 @@ export const CompositeBarView: FC<CompositeBarViewProps> = ({
                                             edit: enableSorting,
                                             collapsed: !isExpanded,
                                         })}
-                                        itemHeight={getItemHeight}
-                                        itemsHeight={getItemsHeight}
+                                        itemHeight={(item) => getItemHeight(item, isCompactMode)}
+                                        itemsHeight={(items) =>
+                                            getItemsHeight(items, isCompactMode)
+                                        }
                                         renderItem={(
                                             nestedItem,
                                             _isNestedItemActive,
@@ -404,6 +414,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
     className,
     menuItemClassName,
     editMode = false,
+    isCompactMode,
 }) => {
     const visibleItems = items
         ?.filter((item) => !item.hidden)
@@ -432,6 +443,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
                     multipleTooltip={multipleTooltip}
                     onToggleGroupCollapsed={onToggleGroupCollapsed}
                     editMode={editMode}
+                    isCompactMode={isCompactMode}
                 />
             </div>
         );
@@ -445,6 +457,7 @@ export const CompositeBar: FC<CompositeBarProps> = ({
                     items={visibleItems}
                     onItemClick={onItemClick}
                     editMode={editMode}
+                    isCompactMode={isCompactMode}
                 />
             </div>
         );