Problem summary

The user needs to browse through a series of tabs without refreshing the page

Example

Usage

• Use when there is not enough space on the website to show all of the content inside all tabs – or if such a listing is irrelevant.
• Use when there are more than 2 sections
• Use when there less than 8-10 sections depending on the length of each section name.
• Use when section names are relatively short
• Use when the content of each tab can be viewed separate from each other, and not in context of each other.
• Use when the content for each tab has similar structure
• Use when you need to show what tab is currently being viewed

• Do not use when the content inside each pane would function just as well in its own separate page.

Solution

• 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 top 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

Rationale

• Navigation tabs lends itself from the physical metaphor of a folderes in a file-cabinet and is thus familiar to the user.
• Module Tabs provide an easy way to show large amounts of similar structured data parted by categories
• Tabs place the content area of the tabs into a context as the selected tab has been highlighted.

More example images of the 'Module Tabs' pattern

• 

  From canon.com.

• 

  From cbs.com.

• 

  From intuit.com.

• 

  You can choose to either search for your content at viget or browse the content by category or by chronological order presented in module tabs.

View more example screenshots

10 Comments

• 1
  

  Rainer

  15 Apr, 2009

  What if I have to or want to show more sections in my module than the module’s width? Does anyone know a good pattern for this?

  I only know some solution for this but am not sure which is really good:
  - showing several rows of tabs… which looks really ugly
  - showing arrows to move the tabs (like for the spreadsheets in Excel or for the browser tabs in Firefox)
  - showing only as many tabs as fit in the row and offer further tabs in something like a dropdown menu

  Any other ideas, recommendations or tips for good examples?

• 2
  

  Tisha

  16 Mar, 2010

  Virgin.com has something similar, you could actually take a que from Firefox tabs and Virgin.com where in you display the tabs you have room for then add a [More +] tab, the issue then is that it’s not really a tab, but more or less a shortcut that updates the “More” tab. I’ve done something like this before using stacked tabs inside a tab. The stacked tabs were all related views of the tab they were contained within.

• 3
  

  Garrett

  4 Mar, 2011

  I wanted to point out a very good point from a comment on the navigation tabs page.

  “The background color of the selected tab should match (or at least seamlessly transition into) the background color of the contents of the tab. This visually ties the content to its tab.”

• 4
  

  loans

  3 Feb, 2012

  Some time ago, I did need to buy a building for my business but I did not have enough money and could not purchase anything. Thank heaven my mate proposed to try to get the home loans from reliable creditors. So, I acted so and used to be happy with my collateral loan.

• 5
  

  http://Www.Pillsbank.com/best-way-stop-premature-e

  25 Nov, 2013

  Admiring the time and effort you put into your site
  and detailed information you provide. It’s nice to come across a blog every
  once in a while that isn’t the same old rehashed material.

  Wonderful read! I’ve saved your site and I’m adding your RSS feeds to
  my Google account.

• 6
  

  sqiar

  30 Nov, 2013

  bUSINESS INTELLIGENCE CONSULTANT
  SQIAR (http://www.sqiar.com/services/… is a leading Business Intelligence company and provides Business Intelligence Services in United Kingdom and USA.

• 7
  

  sizegeneticsextenderreview.blogspot.com

  1 Dec, 2013

  I do not even know the way I finished up right here, however I thought this submit used to be great.
  I don’t recognise who you might be however definitely you’re going to a well-known blogger should you are not
  already. Cheers!

• 8
  

  Www.Pillsbank.Com

  2 Dec, 2013

  Wow, incredible blog layout! How long have you been blogging
  for? you make blogging look easy. The overall look of your site is magnificent, let alone the content!

• 9
  

  Stephanie Smith

  5 Dec, 2013

  I wanted to thank you for this great read!! I definitely enjoyed every little bit of it, I have you bookmarked to check out all the new stuff you post.

• 10
  

  dedicated hosting plans

  24 Mar, 2014

  Hello, i think that i saw you visited my site so i came to
  “return the favor”.I’m trying to find things to improve my web site!I suppose
  its ok to use a few of your ideas!!

Post a comment