List of JavaScript Tab Navigation Scripts

Tags: Ajax, Javascript, jQuery, mootools, Navigation, Prototype, Tabs, YUI

Mar

This past weekend I’ve been working on a free Premium WordPress theme for you. I was looking for a good tab navigation script to add to the theme. To allow for better navigation and to add a cool feature to the theme. I found a tons of tab scripts with various frameworks. The list below is some very good tab scripts.

Yetii - Yetii is an extremely light weight tab script. It is built with no framework and is very easy to install. You can even have a tab nested within another tab.
Advanced Tabs - Advanced Tabs is an EXT JS plugin that allows you to add tabs, tab resizing, and tab scrolling. The code has some very cool features.
Sliding Tabs - Sliding Tabs is a mootools 1.11 plugin that shows the content slide over when you click on the tab or arrow button. It is a really neat effect.
DOMTab - DOMtab is JavaScript that turns a list into a tabular content. It is very lightweight and is easy to implement. It degrades very nicely if your visitor doesn’t allow javascript. DOMtab does have some problems with divs inside the tab content but it is a great script.
Coda-Slider - Coda-Slider is a jQuery Plugin that slides the content over when you click on the tab or the arrow button. It is a cool effect and is fairly easy to install on your site.
Scriptaculous Tabs - Scriptaculous tabs requires the use of obviously scriptaculous and prototype. The script allows you to create interactive tabs for your site and the content box stretches as the more content you put into it.
Ajax Tabs - Ajax Tabs is an easy to implement Dynamic CSS Tab. The user can add and remove tabs (and content) without refreshing the page. It is a very cool concept but just needs some work to make it even better.
MooTabs - MooTabs is a tiny(3kb) class for MooTools. It’s main purpose is to help out with the creation of simple tab navigation. The newest addition to MooTabs is that it now retrieves the content via ajax. It is very easy to install and if you have MooTools than I suggest you check it out.
TabView - TabView is built on Yahoo! UI library and is a good Tab navigation script. It is pretty easy to implement and will allow you to create the same effect that is on Yahoo! homepage.
JavaScript Tabifier - JavaScript Tabifier converts your lists into a tabbed navigation. It is built with no framework and gracefully degrades if JavaScript is not present. With JavaScript Tabifier you can have a tab within a tab and you can use a cookie to remember which tab was selected so it remains selected when you return to the page.

If you have any you would like to add or have used some of the above scripts please comment below.

Popularity: 23%

I hope you enjoyed reading this article. You may subscribe to my RSS Feed, scroll down to leave a comment, or get back to the homepage.

Great Accordion Scripts
10 Auto Complete Ajax Scripts
List of Image Cropping Scripts
List of Ajax form Validators
10 Edit In-Place Ajax Scripts

Add to

12 Users Commented In This Post

Subscribe To This Post Comment Rss Or TrackBack URL

marc says, March 31st, 2008

hi there.thanks for this tip but im just wondering if this can work on my blog.this is,it’s from blogger.if it works and if you can help me,please give a line or two.i would really appreciate your help.thanks again.cheers!

alternatively,you can email me at marcdionisio2006@gmail.com.thanks again.

Brett says, April 2nd, 2008

@marc, I did some searching on Google and found the following links about adding a tab navigation to blogger. The post is broken up into two parts, but you really just need to follow the first part. If you still need help don’t hesitate to ask.

Part 1 http://hoctro.blogspot.com/2007/05/introducing-tabview-widget.html
Part 2 http://hoctro.blogspot.com/2007/05/introducing-tabview-widget-part-2.html

Edwin says, April 5th, 2008

I am not such a huge fan of these techniques with an eye on SEO. I prefer using php so every page is really a special page in stat of loading the pages this way with javascript. How does everybody else think about this?

Jenna Fox says, April 6th, 2008

Edwin: I don’t know about all of these scripts, but the one I created called “Sliding Tabs” does not use Ajax to load any data. All the data shown is in the html of the page, and is just selectively hidden and shown as needed. This shouldn’t affect search engines at all.

Brett says, April 7th, 2008

@Edwin - When originally writing this list I wasn’t looking for SEO, I was mainly looking at the user interaction. I really think that user interaction is much more important than SEO. But they do go hand in hand. I mean without visitors then no user interaction.