Large: Use the Large Tabs when separating the content of an entire page. These tabs should be positioned directly below the Title Bar.
Default: Use the Default Tabs when separating content within a section of a page or within an element on the page.
Small: Use the Small Tabs to separating content only when space is very limited. These should be used sparingly.
Default: Use the default tabs when displaying a small number of tabs.
Tabs Stacked: Use the Stacked Tabs when displaying a large number of tabs that would not fit into a horizontal layout, or as sub navigation within a horizontal tab view. Use sections within the Stacked Tabs to groups related items.
Default
Hover
Disabled
Active
When Tabs container is too narrow to display all tabs, a horizontal scroll indicator should be show and horizontal scrolling should be available. The scroll indicators container an icon button that allows users to move the items left or right without scrolling.
For the Medium and Small breakpoints, the stacked tabs will collapse into a side bar. An icon button will allow user to open the tabs as an overlay.
Only use tabs when users don’t need to see content from multiple tabs simultaneously.
Tabs should be arranged in a logical order that makes sense to the user. The default tab should be first and contain the most important/frequently-read information. The following tabs should be arranged in order of importance or logic.¹ Tabs also remain in a consistent order regardless of which tab is selected.² If tabs are not organized in a logical way it increases the users cognitive load.³
Do
Don't
Write short, clear labels, one or two words max in most cases. Use parallel construction--every item should be a noun or a verb. Avoid repeating words if possible.
Use title case--capitalize the first letter of every word. Never use ALL CAPS in tab labels because it’s harder for the user to read.²
The tab heading should clearly describe how the group of tabs are related.
Do
Don't
“8 Tips to Get Tabs Right in Web Design.” Justinmind, www.justinmind.com/blog/8-tips-to-get-tabs-right-in-web-design/.
World Leaders in Research-Based User Experience. “Tabs, Used Right.” Nielsen Norman Group, www.nngroup.com/articles/tabs-used-right/.
World Leaders in Research-Based User Experience. “Minimize Cognitive Load to Maximize Usability.” Nielsen Norman Group, www.nngroup.com/articles/minimize-cognitive-load/.
