Components-Tabs¶

Tabs make it easy to explore and switch between different views.

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.
Present tabs as a single row above their associated content.
Tab labels should succinctly describe the content within.
Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping.

Types¶

Fixed
Scrollable

Tab Levels¶

Tab labels may include icons and text.

color¶

Apply your app’s accent color, or a contrasting color, to text fields and the text field cursor.

Usage¶

A tab provides the affordance for displaying grouped content.
A tab label succinctly describes the tab’s associated grouping of content.

For different types of MObile & Desktop tabs Click Here

When to Use¶

Use tabs to organize content at a high level, for example, to present different sections of a newspaper. Don’t use tabs for carousels or pagination of content.Those use cases involve viewing content, not navigating between groups of content
Don't use tabs with content that supports the swipe gesture, because swipe gestures are used for navigating between tabs.
Fixed tabs should be used with a limited number of tabs and when consistent placement will aid muscle memory.
Scrollable tabs should be used when there are many or a variable number of tabs.

Tab characteristics¶

Tabs control the display of content in a consistent location.

Present tabs as a single row. Wrap tab labels to a second line if needed, and then truncate.
Do not include a set of tabbed content within a tab.
Highlight the tab corresponding to the visible content.
Group tabs together hierarchically. Connect a group of tabs with its content.
Keep tabs adjacent to their content to maintain the relationship between the two.

Content¶

Content presented in tabs can vary widely, even between tabs.
All content within a set of tabs should be related under a larger organizing principle (for example, Settings or Directions), with each tab’s content mutually exclusive of the others'.
Tab labels should provide meaningful distinctions that logically organize associated content.
Tab labels may include icons and text. When choosing a text label, use short titles.

Types of Tabs¶

Depending on the platform and the context of use, tabbed content can be presented as either fixed tabs or scrollable tabs.

Fixed Tabs¶

Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs in fixed positions, such as switching transportation methods for directions in Google Maps. Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

Scrollable Tabs¶

Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. Scrollable tabs are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.

Specs¶

For Specs of different tabs Click Here.