Module Tabs Design Pattern
February 13, 2006 at 5:25 am by Bill Scott | In Design | 32 CommentsProblem Summary
The user needs to navigate through one or more stacked panes of content without refreshing the page.
The challenge here is to distinguish tabs that control content within a page from general site navigation tabs. The approach we take a Yahoo! is to treat them visually lighter. Using links for the non-selected tab and the pointer style tab for the selected tabs creates a visual contrast with the Navigation Tabs that might appear on a given site.
Tidwell describes the general pattern behind tabs as a Card Stack.
The pattern can be found at: Module Tabs.
Note 1/3/2007: For code samples to support this design pattern, please see the YUI TabView Control. -Eric Miraglia
Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!
32 Comments »
RSS feed for comments on this post. TrackBack URI
Leave a comment

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service
Powered by WordPress on Yahoo! Web Hosting.


Why doon’t you guys include some example
codesfor us to work with?Comment by Daniel — February 14, 2006 #
It’s coming. We plan to release code with the patterns where appropriate. The code libray and the pattern library are on a trajectory to be more insync as time goes by – we are a little out of step on the first drop. But keep asking.
Comment by Erin — February 14, 2006 #
I believe that web users have become accustom to the paradigm of clicking a link that loads a new page. Loading additional content into an existing page may cause confusion.
Care and suitable usage are needed when using this technique. Let us not forget the bad days of poor iframe usage.
Comment by Mason — February 14, 2006 #
Need code. Great work!! I am starting to love the !Y Devnet.
Comment by Meneedcode — February 14, 2006 #
First of all thanks for sharing it guys.
As Daniel has said, it would be really helpful if there were some code samples.
Comment by Sudar — February 17, 2006 #
I love it. When do you think some sample code will be available.
Comment by Mike — February 21, 2006 #
Thanks everyone for the feedback. It is loud and clear, “how about some code, please!”
The next minor release is focused on pulling some of the code assets together and not on more patterns. I will refrain from promising an exact date, but it should be fairly soon.
Thanks for the feedback. It really does affect our priorities.
Comment by Bill Scott — February 23, 2006 #
Very impressive. We’re integrating the Yahoo widgets into our intranet application.
PLEASE post the code!
Comment by Pat — February 27, 2006 #
Just wanted to put up my request for the code. It would be nice since it really improves the learning curve when you actually have a working example to study.
Comment by Justin — February 28, 2006 #
Ditto on the code request!
Comment by Jamie — February 28, 2006 #
please provide sample code asap. I’m eager to use them in my project.
Comment by William — March 5, 2006 #
Eagerly awaiting the code examples :)
Comment by Phil — March 21, 2006 #
Hey guys, love the library but ditto on the request for the code. I have loved the tabbed content metaphor since seeing it on the news portion of your site and would love to use this! I also love the way you use tooltips to summarize content….very slick!
Comment by Tom Caldwell — March 23, 2006 #
Great Great Great. Okay how about the code to use this in our own projects?
Comment by Tom — March 23, 2006 #
Yes it is unanimous! You guys want code!
Believe me we are working to provide it. A lot goes into getting the code released in a way that we feel we can support. We have some internal examples of the tabbed interface that we could release but we are doing a review on it to make sure it is ready for primetime.
Sorry it is taking a little while. Hopefully it will be very soon.
Comment by Bill Scott — March 24, 2006 #
Could you give us an estimate when the sample code will be released? I need to use it in one of my projects. Thanks.
Comment by William — April 2, 2006 #
I have requested that tab code be available in the next release. However, the Y!UI team is incredible busy getting a lot of new things ready for this release. Lots of good stuff. I have passed all of these comments over and they clearly hear that this is being requested frequently.
Comment by Bill Scott — April 3, 2006 #
Many of us are looking for UI development leaders such as !Yahoo and G**gle to set some standards in an otherwise overwhelmingly untamed area of Web UI. Browser wars have crippled the web development community! Serious programmers don’t want to touch the web for that very reason! We are spending countless hours keeping track of Safari, Opera, FireFox, IE, and Netscape bugs. The information on the web is disorganized and often misleading.
Most of us can write a tabbed interface in a couple of hours, but many of us don’t have the time or resources to make sure that it’s 99% browser compatible, or easily upgradeable. By having such standards maintained by a strong leader like !Yahoo with the help of the open source community, the rest of the development world can concentrate on developing business logic and improving appearances, confidently knowing that our interfaces will work in a familiar way in every browser we need to support.
I am a seasoned web developer that can not wait till the day when programmers and designers have a standard for implementing general UI components within a web application. Software is moving to the Web, why not learn from the lessons of desktop applications!?
Any one see the irony? “Everyone talks about Web 2.0. Talk is cheap. How about some real help? (http://developer.yahoo.com/)”
Yes, that means I would love to see the code or at least a month estimate on when it might be released. (June? October?) For me that might mean waiting a couple of weeks before I assemble my next tabbed interface…
Comment by Alex — April 3, 2006 #
Hey Alex,
I wholeheartedly agree that there is much to learn from desktop development. My colleague Eric Miraglia discussed this in some detail in an earlier blog entry (see Developing a JavaScript Library for Yahoo!, particularly the second half.)
Regarding code and dates: That you would delay one of your projects to wait for our code is, and I’m not trying to be snarky here, one of the reasons we don’t offer dates or roadmaps. It would be irresponsible for us to put your project at risk by setting expectations that we would perhaps not meet. As Bill Scott has indicated in earlier comments, we’re hard at work on many bits of code, and looking forward to the day when the Design Patterns Library and the User Interface Library are in sync.
Stay tuned, and if you’re a developer interested in using the library please consider joining the Yahoo! Group on which we’re discussing the components and their use.
Thanks,
Nate
Comment by Nate Koechley — April 4, 2006 #
is there any code out on how to implement this thing???
Comment by lami — April 24, 2006 #
Thanks for your interest. Please see comments above.
Comment by Bill Scott — April 24, 2006 #
it looks like the main yahoo.com is using a similar card stack for the categoriy selection: web, images, video, audio, etc…
can we take a peek at that?
Comment by Kevin — May 5, 2006 #
I understand the reluctance to set a date for release and know you guys are busy, so I won’t ask. Just letting you know that there is still interest here and that I check back here often to see if there is an update, as I’m sure many others do as well. Silence, doesn’t mean forgotten… :-)
Comment by Tom — May 8, 2006 #
I see that the code has been released but it references to the Navigation Tabs design pattern (http://com1.devnet.scd.yahoo.com/ypatterns/pattern.php?pattern=navigationtabs) and not the Module Tabs pattern at (http://com1.devnet.scd.yahoo.com/ypatterns/pattern.php?pattern=moduletabs&showrevision=true)
Will much appreciate the Module Tabs pattern.
Thanks and keep up the good work!
-Kevin
Comment by Kevin — May 9, 2006 #
Yes, I was also rather deflated when I found source for Navigation tabs, but not Module tabs — Navigation tabs are far easier to implement, and sample code is notably less interesting as such. Has any independent developer posted a sample of implementing the Module Tab design in the meantime?
Comment by Adam — May 18, 2006 #
Any chance the “real” modular tabs source code will be relased soon?
Please, please?
-Kevin
Comment by Kevin — May 22, 2006 #
Hey guys, thaught this page may help until yahoo get round to doing the code (i know they are busy etc) http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ It worked verry well for me. (hope yahoo let this be published!)
Comment by Ash — June 11, 2006 #
Reading the posts I’ve seen that the code for the Module Tabs is requested since february. (I don’t have a good english so I’m trying to communicate as well as possible) Are you still building the code for its publication? or it was forgotten?
Comment by Miguel — July 12, 2006 #
I appreciate this site and the work that’s gone into the rationalizations for the choices made… it makes my job easier, when convincing a client of a choice or a developer of an approach.
I add my voice regarding wanting to see examples for elements which don’t yet have them (like this one) and I add my thanks for those which do have examples (like : http://developer.yahoo.com/ypatterns/examples/tabs.html).
Thanks,
-alan-
Comment by alan blount — August 7, 2006 #
Any word on the code? It will be almost a year now and no sign of it.
Thanks
Greg
Comment by Greg — January 3, 2007 #
@Greg:
Please check out http://developer.yahoo.com/yui/tabview — it’s just what you’re looking for.
Regards,
-Eric
Comment by Eric Miraglia — January 3, 2007 #
1) vertical module tabs?
2) how does this impact SEO.
Comment by chiladelphia — November 26, 2008 #