Tab Bar
Usage
When to Use
Use a tab bar to allow users to alternate between sections of the same context. The content within the set of tabs should be related and form a coherent unit.
When Not to Use
Don’t use a tab bar if the tabs navigate to another page. Use links instead. (NNGroup, Tabs Used Right)
If you have only a few rows of data organized in two or three tabs, arrange the sections below the other and use your tab labels as titles for each section instead.
If you want to split some content that is not directly related into multiple sections and layers, use a sidebar instead. Sidebars are also more suitable if you have to use 7 or more tabs to organize your content.
Tab bars are navigational controls. Do not use them to allow users to choose between options. Use radio buttons or a switcher instead.
Variants
Basic Tabs
The basic variant of tabs contain only text and are not supplemented by any additional content.
Additional Information
In some cases, it can make sense to show additional information, like the number of entries together with a tab title. Therefore, it is possible to attach such information to the right of each tab title.
Additional Icon
It is possible to attach an icon to the left of each tab label. Only use icons if you can find a fitting icon for each tab and if you especially want to emphasize the tab bar.
If you decide to use icons, use them for all of your tabs. Never combine text-only tabs and icon tabs within one tab bar. This damages the visual balance and causes users to oversee tabs that are not supplemented by an icon.
More Tab
If your tab bar needs more than seven tabs, It is generally recommended to use another type of navigation instead. If you decide to use a tab bar nevertheless, it is possible to use a 'More' tab as the last option in your tab bar. Similar to the drop-down list, elements of the More tab get revealed as a list when users click on the tab.
The More tab also appears automatically when the screen’s width gets too small to display all the tabs.
Disabled Tabs
Single tabs within a tab bar can be disabled. Generally, avoid using disabled tabs.
Instead of disabling a tab, it’s better to keep the tab enabled and explain why its content is unavailable in the body of the tab. Keep in mind to give users a reason why the content is not available and a solution to enable the content.
Content
It is essential to use a thoughtful structure for your tabs. Users should not have to think about where to find a specific element. If you can’t find a good label for each tab, chances are that the structure itself is deficient.
Users should never have to switch back and forth between tabs to compare specific values. If they have to do this, reorganize your data or don’t use tabs at all.
Use one or two words per label. Users only scan labels and in most cases won’t read more than two words. (NNGroup, How Users Read the Web)
Avoid generic words, such as 'General' or 'Advanced'.
Place the most frequently used content in the first tabs.
Use title-style capitalization for all tab labels.
Structure
Tab bars only affect the content below the bar and nothing else. Never change content that is on the same level or above the tab bar.
Avoid multiple levels of tabs. Instead, combine different navigations, such as a sidebar with a tab bar, or just use a sidebar with multiple levels of content.
Don’t put any unrelated content that doesn't change with the tabs below the tab bar. Otherwise, users will get confused about what belongs to the tab bar and what doesn't.
Layout
The spacing above and below a tab bar depends on the circumstances and can be applied differently. In most cases, 32 pixels are used above the tab bar and 16 pixels below the tab bar.
