5 Tabbed Interfaces To Display Your Content In

I was looking at how content can be presented in tabs and found a few choices.  To clear up what I mean by tabbed content, here is an example from Problogger:

Tabbed content allows you to place content under a tabbed menu selection.  This helps to reduce clutter as well as organize multiple things in one area.  It also buys up screen real estate that can be used for other stuff or simply to make your page look cleaner.

I’ve used Tabifier before but I ran into a few others that I forgot about or just discovered and have not used.  Starting with the example above, it looks like Problogger uses a very popular script called DOMTab.

Hey Everybody, Look What’s Under The Covers!!

One way to find out what code is being used at a web site that displays tabbed content is to look at the page source of a site.  Typically under the View menu selection in Firefox and Internet Explorer is where you’ll find the Source menu selection.

Once you’re viewing the code for that web page, look for “class=” attribute or “id=” around the area that contains the tabbed content.  Press Ctrl-F to find text in the source close to the tabbed area.

As with all  the tabbed interfaces listed here, the hardest part setting them up is referencing the files correctly and styling the tabs to fit your – style.   🙂

The Goods

Here are 5 tabbed interfaces that I’ve been playing with and they are listed in no particular order.  I’ve been testing idTabs, Nanotabs and the Yahoo! User Interface Library versions so I can implement tabbed content in the sidebar of this blog.

1. DOMTab by onlinetools.org
2. Tabifier by BarelyFitz Design
3. idTabs by Sunsean (Sean Catchpole)
4. Nanotabs by Sunsean (Sean Catchpole)
5. Tabview by YUI – The Yahoo! User Interface Library

Here are a few tutorials and resources to help:

• How to Add a Tabbed Content Section to Your Blog by Design Adaptations
• WordPress Tutorial: Adding Tabs to Your Blog Sidebar by Rubiqube.com
• Create a Slick Tabbed Content Area using CSS & jQuery by Collis Ta’eed
• How to Put Your Best Content Forward by Small Potato
• 14 Tab-Based Interface Techniques by Smashing Magazine