Tab Bar

Displays a tab bar to switch different views

Anatomy

The Tab Bar component is a graphical user interface element used for displaying multiple views or screens in a single window or page. It allows users to switch between different tabs, each representing a different view, with only one tab visible at a time.

Tab Bar container: The main container that holds all the tabs.
Tab item: A clickable item that represents a single tab.
Active indicator: A graphical element that indicates which tab is currently active.
Tab label: A label that describes the content of the tab.

Usage

The Tab Bar component is used to Display multiple views or screens in a single window or page, Allow users to switch between different tabs easily and quickly, and can Provide a clear and organized navigation system for the user.

When to use

When displaying multiple views or screens in a single window or page.
When the content of each tab is distinct and can be clearly described by a label.
When the number of tabs is limited to a reasonable amount.
When you want to provide users with a visual representation of their current location within the application
When you want to simplify navigation by reducing the number of buttons or links on the page

When not to use

When the content of each tab is similar or related, making it difficult to distinguish between them.
When the number of tabs is excessive, making it difficult to navigate and overwhelming for the user.
When you want to provide users with a more detailed or complex navigation menu
When screen real estate is limited and you need to prioritize other UI elements

Accessibility

When implementing the Tab Bar component, it’s important to ensure that it is accessible to all users. Here are some tips for making the Tab Bar component more accessible:

Providing a clear and descriptive label for each tab.
Test the component with assistive technologies to ensure that it is fully accessible
Using semantic HTML markup for the component.
Providing keyboard support for navigating between tabs.
Ensuring that the active indicator is visible and clearly distinguishable from other elements.

Fit the right and proper amount of tabs in the Tab Bar. So users can utilize the function of Tab Bar component.

Don't

Don't overload the Tab Bar with too many tabs or options. That could cause confusion for the users in using Tab Bar component.

Content

When creating Tab Bar :

Tab labels: Clear and descriptive labels that describe the content of each tab.
Active indicator: A graphical element that indicates which tab is currently active. This can be a color change or an underline.
Tab item: A clickable item that represents a single tab. The tab item can include an icon, label, or both.

Use clear, concise labels or icons for each tab element. So it doesn’t causes some confusion and misunderstanding for the users in using Tab Bar component.

Don't

Use unclear, vague labels or icons for each tab element. Because it could causes some confusion and misunderstanding for the users in using Tab Bar component.