Tabs / Sub Tabs

Tabs are a graphical user interface element that allow users to navigate between multiple views or pages within a single window or interface. Tabs typically appear as a set of clickable labels or tabs at the top or bottom of the interface, with each tab representing a different view or page.

When To Use Module Tabs

The primary goal of the module tabs UI pattern is to permit users to view a group of related data one at a time, which in turn allows designers to modularize this group of information in a compacted manner, saving valuable screen real estate.

Module tabs have space limitations which restricts the length of tab control text. Because of this, the tab control text must be succinct, typically using only one to three key words

Types of Tabs

- Default tab bar

- Tabs with a More dropdown menu

- Tabs with overflow pagination with chevron overflow pagination

Tabs Anatomy

Sub Tabs

Tabs Examples