Tabs

Tabs are a user interface element utilized to categorize content by grouping related information within a single page.

Anatomy

• Selected: The active tab.
• Unselected: The other available tabs.
• Divider: Separates the tab navigation and content.

Types

• Fixed Tabs (for upto 4 options)
• Scrollable Tabs (more than 4 options)

Content

Tab labels should provide clear and concise explanations of the content within. Each tab's content can be independently categorized and mutually exclusive of the content of other tabs.

Behaviour

Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content.