Табы Tabs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полоска-маркер имеет стандартный цвет #3D3D3D.

Можно использовать фирменный цвет сервиса.

Допускается использование красного и зелёного цветов, не смотря на их смысловую нагрузку, т. к. к табам неприменима валидация.

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

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

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