Tabs

Definition

Tabs organize content within a category in a horizontal menu of logical subsections.

Each tab within a group contains a distinct subsection of content.

Common Characteristics

All tabs are presented horizontally and have ALL-CAPS labels. All tabs have a separator that spans the width of the content area governed by the tabs. Tabs have these states: selected, active, hover/tap, and focused. A Tab with no content must have explanatory text rather than left blank.

Usage Guidelines

The left-most tab is always pre-selected by default. Content within tabs must be peers related to the same parent category/topic/item. If necessary, tabs can scroll horizontally above the content they govern.

Tabs can scroll above the content if needed. Tabs with no content must have explanatory text. Click the second tab for an example.