Табы Tabs

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

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

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

Не используйте табы для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.

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

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

Описание работы

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

Иногда табы и контент сложно разделить. Это допустимо. В этом случае расстояние между названиями табов и полосой уменьшите на 5 px.

Делайте кликабельную область большого размера, чтобы в нее проще было попасть курсором.

При наведении курсор превращается в палец, полоса у пункта показывается с прозрачностью 40%.

Выбранный пункт не реагирует на наведение курсора, курсор в палец не превращается.

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

Название

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

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

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

Цвет

Красьте полоску-маркер в фирменный цвет сервиса. Красный и зеленый — можно. Либо используйте синий по-умолчанию.

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

Не красьте разные табы в разные цвета.

Не кодируйте цветом «хорошие» и «плохие» пункты.

Работа с клавиатурой

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