Табы Tabs

Табы группируют контент и помогают в навигации.

Используйте табы для второстепенной навигации и не используйте для основной.

Используйте табы для группировки или фильтрации контента.

Не используйте табы для переключения состояний — для этого есть радиокнопка, тогл и переключатель.

Табы могут быть вертикальными и горизонтальными.

У табов могут быть счётчики событий или бейджи уведомлений.

При наведении на таб курсор реагирует.

При клике открывается новый контент, полоса переезжает к другому пункту с анимацией. Одновременно меняется и её ширина. Страница при этом не перезагружается.

Выбранный пункт не реагирует на наведение курсора.

Неправильно

Правильно

Рекомендуем отделять табы от контента. Так интерфейс лучше читается.

Название таба должно однозначно говорить, что увидит пользователь после нажатия на таб.

Называйте табы существительными или прилагательными в значении существительных. Например, «Документы», «Товары», «Сообщения», «Новое».

Не называйте табы глаголами — в названии табов не должно быть действия.

Неправильно

Правильно

Полоска-маркер фирменного цвета сервиса.

У табов есть три размера — S, M, L.

При переходе к меню клавишей Tab первый таб получает фокус — появляется чёрная рамка. Стрелками можно перемещать фокус между табами. Если нажать клавишу Enter — произойдёт переход: