Horizontal Tabs

Tabs are used to separate content into different views, which can be displayed one at a time without a page refresh.  Tabs provide easy access to additional content without requiring the user to go to a new page.

Web

When to Use

  • Use tabs when content is closely related, but mutually exclusive
  • Use tabs when it is not important to see more than one content pane at a time

Appearance & Behavior

  • Always show one tab as selected with its content visible.
  • Selecting a tab will not affect other parts of the page.
  • Tabs should always appear in the same location as the user clicks from one tab to another.
  • Limit labels to short words – try not to wrap
  • When using icons, they should be 20px Harmony icon font, color #bdbfc3

iOS

When to Use

  • Use tabs when content is closely related, but mutually exclusive
  • Use tabs when it is not important to see more than one content pane at a time

Appearance & Behavior

When displaying multiple sections within a page, consider:

  • Control Type: for iOS, use the native segmented control
  • Scalability: the control needs to scale to include page types beyond 3 or 4.
    • iOS Segmented Control: scale by including a “More” option as the last tab in the control.
    • On iPad, tapping more should open a popover which includes a list of alternative views.
    • On iPhone, tapping more should open an action sheet which includes a list of alternative views.
    • Selecting “More” does not replace the label, but the choose should use the check mark pattern to indicate which tab is currently selected.
    • For an interactive example: App Store iOS7 App
Primary segment control

Primary segment control

Secondary Segment Control

Secondary Segment Control

 

Android

When to Use

  • Use tabs when content is closely related, but mutually exclusive
  • Use tabs when it is not important to see more than one content pane at a time

Appearance & Behavior

When displaying multiple sections within a page, consider:

tabs_android

Text Guidelines

  • Capitalization of horizontal tab names is Title Case
© Intuit 2016 | Terms of use