Content needs to be separated into sections and accessed via a single content area using a flat navigation structure that does not refresh the page when selected.
The Navigation tabs pattern is an extension of the desktop metaphor in which physical objects are represented as GUI elements. Navigation tabs are derived from the idea of folders in a file-cabinet and are thus familiar to the end user
Module Tabs provide an easy way to show large amounts of similar structured data parted by categories
Tabs create a context for content, when a tab is selected the relevant content is loaded inside the content area.
3 comments
Rainer on Apr 15, 2009
Remove
Edit
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?
Tisha on Mar 16, 2010
Remove
Edit
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.
Garrett on Mar 04, 2011
Remove
Edit
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.”
Comments have been closed