Horizontal Module Tabs

Also known as: Module Tabs, Inline Tabs, Inlay

Tags: content, forms, navigation, showing data

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.

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.

+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (5 examples)

Comments

  • AdWords Auto Manager (www) May 7, 2011 11:35

    Here is another great example of a inline tab navi.. with a zip file download to use.. great stuff here http://www.onlinetools.org/tools/domtabdata/

    the problem with inline tab navi ... is all seo ..

  • 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 Jan. 26, 2013 11:20

    Thanks for the notice Thomas, it is fixed now.