Horizontal Module Tabs

Horizontal Module Tabs separates content into different panes, and the panes can be viewed one at a time. Tabs are arranged horizontally above (sometimes below) the content, and the selected tab is highlighted. This pattern provides easy access to additional content within the page and without a page refresh, instead of requiring the user to go to a new page. Horizontal Module Tabs can be used when it is not important to see more than one content pane at a time.
See Vertical Module Tabs for an alternative way to arrange the tabs.

Wufoo.com: Tools for editing a form are in three separate panes. The user can switch between them fast without a page refresh.

What problem does the pattern solve?

  • There are multiple panes of content, but there is space to only show one content pane at a time.
  • The different panes of content do not need to be viewed in context with each other.
  • You want to allow users to switch between different sections without going to a different page. For navigating to different pages within a site, use Navigation Tabs instead.
  • There are 2-10 content panes.
  • The content pane titles are relatively short and predictable.
  • It is important to communicate which content pane is currently being viewed.

When to use it?

  • There are multiple panes of content, but there is space to only show one content pane at a time.
  • The different panes of content do not need to be viewed in context with each other.
  • You want to allow users to switch between different sections without going to a different page. For navigating to different pages within a site, use Navigation Tabs instead.
  • There are 2-10 content panes.
  • The content pane titles are relatively short and predictable.
  • It is important to communicate which content pane is currently being viewed.

How to use it?

  • Present tabs immediately above the stacked panes of content they will control.
  • Never stack multiple rows of tabs to control a single piece of content.
  • Always show one tab as selected with its content visible.
  • Show the most important content in the first tab (which is selected by default) because most users might never view other tabs.
  • Indicate the selected tab by highlighting the background of the “cell” around it.
  • The content should be visually connected to the tab it is associated with and be visually bounded (usually by a box).
  • Only one content area may be visible at a time.
  • Usually active tab is switched with a mouse click, but you can also consider activating tabs by hovering over a tab. It makes finding additional content slightly easier, but on the downside, it might annoy users if the tabs switch unintentionally.
    h3. Maintaining the metaphor
  • Tabs should appear in the same location as the user clicks from one tab to another.
  • Wherever possible, do not refresh the entire page upon selection of a new tab.
  • Selecting a tab will not affect other parts of the page.
  • Selecting a tab will not navigate to a different page or perform an action (beyond switching the visible content.

Why to use it?

  • Tabs provide context. They give visual indication of a user’s location within a body of information.
  • Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
  • Tabs provide navigation. They provide the ability to navigate alternate content views.

Accessibility

  • Allow the user to navigate across the tabs in a logical order with the Tab key.
  • A focused tab can be selected with the Enter key.
  • Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
    • Include a TITLE attribute with the word “active” into the link that was just activated.
    • Include an invisible graphic with an ALT attribute and a word “active” into the link.
    • Attach an ALT attribute with the word “active” to a graphical element that indicates active link.

Sources

This pattern is based on Module Tabs pattern from Yahoo! Design Pattern Library.

Useful links

Example images (5 examples)

Comments

  • Thomas Scheinecker ⋅ Jan. 25, 2013 17:46

    The link insede of 'See Vertical Module Tabs for an alternative way to arrange the tabs.' is broken, it should point to http://patternry.com/p=vertical-module-tabs/

  • Janne Lammi ⋅ Jan. 26, 2013 11:20

    Thanks for the notice Thomas, it is fixed now.

  • Mger ⋅ July 28, 2014 05:57

    Section "What problem does the pattern solve?" and "When to use it?" there is no difference.

  • Fast 8 Vin Diesel Jacket (www) ⋅ Feb. 12, 2017 22:19

    To help accomplish the ideal fit there are several clasped midsection agents along the edge creases. Inside this calfskin coat is completely lined and incorporates three cowhide trimmed pockets. One of these is sped for additional security. The immense thing about the sheep aniline cover up utilized as a part of this coat is that it uncovers the character and unique markings of the skin. It works truly well with styles like this that are spotless and negligible.

  • peggo apk android (www) ⋅ Feb. 16, 2017 12:20

    good Peggo Let's download all offered videos on YouTube. Yes, there is no restriction downloading videos with Peggo. If you have a limitless information intend

  • Forex trading (www) ⋅ yesterday 13:45

    Best Brand is a Premium Corporate, Listing, Multi-reason Drupal subject, concentrated on helping you introduce your items and administrations. Furthermore, Best Brand Pro and Best Brand Enterprise come packaged with Drupal Commerce giving you a turnkey web based business arrangement directly after establishment.