SubnavigationBar

Горизонтальная панель с кнопками-ссылками для быстрой навигации между подразделами или управления контентом. Используется как элемент вторичной навигации внутри раздела. Поддерживает горизонтальную прокрутку контента с индикацией наличия скрытых элементов (стрелки навигации).

Загружается...

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

Переключение между связанными подразделами.
Активации фильтров или сортировок.
Быстрый доступ к модальным окнам.
Группировка действий в компактном пространстве.

Режимы работы

Фиксированная ширина

fixed={true} — равномерно распределяет пространство между элементами:

Автоматически отключает горизонтальную прокрутку.
Требует точного контроля за содержимым (рекомендуется 2-5 элементов).
Для длинных текстов используйте textLevel у SubnavigationButton.

Горизонтальная прокрутка

fixed={false} (по умолчанию) — активирует адаптивную прокрутку. Поддерживает свойства из HorizontalScroll:

showArrows — управление видимостью стрелок;
getScrollToLeft/getScrollToRight — кастомная логика прокрутки;
scrollAnimationDuration — скорость анимации.

Список элементов реализован с использованием семантического тега ul.
Элементы списка оборачиваются в семантические теги li.

SubnavigationButton

Кнопка/ссылка для использования внутри SubnavigationBar. Предназначена для навигации между подразделами или управления контентом (активация фильтров, открытие модальных окон).

Загружается...

Состояния

selected — выделяет кнопку как активную. Используйте для индикации текущего раздела или применённого фильтра.

Загружается...

Режимы отображения

Задается свойством mode:

primary — первичный вид для привлечения внимания;
outline — вид с обводкой;
tertiary — третичный вид без фона.

Внешний вид

Задается свойством appearance.

`accent`

Загружается...

`neutral`

Загружается...

Размеры и контент

Размер самой кнопки задается свойством size:

s — компактный;
m — стандартный;
l — увеличенный.

textLevel — отдельно настраивает размер текста (1 — крупный, 3 — мелкий). Полезно в режиме fixed у родительского SubnavigationBar.

Загружается...

Дополнительные элементы

before — иконка перед текстом (рекомендуемый размер 24px).
after — счётчик или бейдж (рекомендуется использовать только Counter size="s" или Badge).
chevron — добавляет стрелку-индикатор справа.

Загружается...

Свойства и методы

SubnavigationBar

Свойство	Описание
`fixed`	`boolean` Отключение возможности прокручивания компонента по горизонтали. По умолчанию: `false`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`getScrollToLeft`	`ScrollPositionHandler` Функция для расчета величины прокрутки при нажатии на левую стрелку. По умолчанию: `(x) => x - 240`
`getScrollToRight`	`ScrollPositionHandler` Функция для расчета величины прокрутки при нажатии на правую стрелку. По умолчанию: `(x) => x + 240`
`scrollAnimationDuration`	`number` Длительность анимации скролла. По умолчанию: `-`
`showArrows`	`boolean \| "always"` Показывать ли стрелки. По умолчанию: `true`

SubnavigationButton

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`after`	`ReactNode` Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`. По умолчанию: `-`
`appearance`	`"accent" \| "neutral"` Тип внешнего вида кнопки. По умолчанию: `accent`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`before`	`ReactNode` Рекомендуется использовать только иконки с размером 24. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`chevron`	`boolean` Нужно ли отображать иконку `"chevron"`. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`hasActive`	`boolean` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `-`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `-`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `-`
`mode`	`"primary" \| "tertiary" \| "outline"` Стиль отображения кнопки. По умолчанию: `primary`
`selected`	`boolean` Выбранное состояние. По умолчанию: `-`
`size`	`"s" \| "m" \| "l"` Размер кнопки. По умолчанию: `m`
`textLevel`	`"1" \| "2" \| "3"` Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`. По умолчанию: `1`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

Root

Tabs