Tabs

Interaction Specs

Interaction Specs: 

Option 1

1. Select a Tab.

The selected tab is highlighted to indicate to the user that section is actively displayed.

Tab Navigation is used to navigate to secondary-level and deeper pages than appear in the header area.

Maximum number of tabs is 7.

2. Note additional available tabs.

Available and unselected tabs.

3. Go to On Hover.

Tab is highlighted on hover state.


Option 2

Product Category Tabs.

Product category tabs are used to display different views of product listings.

The highlighted tab is active.

1. Select a Tab.

Selected tab is highlighted.

2. Available content tab-not active.

Selected tab is not highlighted.

3. Note On Hover.

Tab is highlighted on hover state.

4. View Tab Content area.

Content available.


Option 3

1. View selected Tab.

The selected tab is highlighted to indicate to the user that section is actively displayed.

Tab Navigation is used to navigate to secondary-level and deeper pages than appear in the header area. Maximum number of tabs is 7.

2. Tab Content area.

Content will display related detail.

3. Additional available tabs.

Available and unselected tabs.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

Tabs allow user to navigate among features of interest within the site provide an indication of site features. Tab navigation also provides an indication to the user of their current location within the context of the site.

What is the Solution

Tabs provide easy to use browsing navigation that builds on a real world metaphor. Tabs provide context. They offer the ability to give visual indication of a user's location within a body of information. It is best to provide a single line of Tabs, below a section title or page. The entire Tab area should be clickable.

  • Each Tab should link directly to the named content.
  • The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
  • The category titles are relatively short and predictable.
  • The number of categories is not likely to change often.
  • Present the content of one tab inside a box (content area)Place a horizontal bar on top of the content area with links representing tabs.
  • Refrain from having more than one line of links in the top horizontal tab bar.
  • Use color coding or other visual support to indicate what tab is currently being viewed.
  • Present the content of each tab in the same content area.
  • Only one content area should be visible at a time.
  • Maintain the same structure of the horizontal tab bar after a new tab has been clicked.
  • Only the content area of the tabs and the horizontal tab bar should be changed when a user clicks a new tab. If possible, the page is not refreshed when a tab is clicked.
  • A new page is not loaded when a tab is clicked.

When to Use This Pattern

Tab Navigation provides a visual indication of the users location and context for the user. To show where the user is, where the user is going, and ensure consistency. There are two options depicted depending on the contextual use-dotcom or My VMware. Use when:

  • The categories belong to a logical group.
  • Use when the content of each tab can be viewed separate from each other, and not in context of each other.
  • The content for each tab has similar structure.
  • Use when there are more than 2 sections.
  • Use when there less than 8-10 sections depending on the length of each section name.
  • There is a need to show what tab is currently being viewed.

Do Not Use This Pattern

  • Never stack multiple rows of tabs as this leads to confusion about the selected layer versus inactive layer.
  • Do not use when the content inside each pane would function just as well in its own separate page.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015