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:


{ 1 comment… read it below or add one }

1 tri cities real estate November 1, 2011 at 6:37 pm

I’m really interested with nanotabs. It’s the pocket version of the iDtabs and it does not require jQuery. I can’t wait to use it.

Leave a Comment

Comment Policy: Please leave the best comment you can. Comments like, "Hey Nice Post" or comments that have been automated and make no sense, will be deleted. Feel free to argue when necessary, but no name calling. They will be edited out. I appreciate it and others will too.

Another great thing to do is leave your real name and not your company name in the name field.

Want to write a Guest Post for The Spinning Donut? Check out the Guest Post Guidelines here.

{ 1 trackback }

Previous post:

Next post: