
Tab navigation has been one of the most fundamental element in any modern web structure. In order to make sure visitors can properly navigate through the website. One of the biggest challenge web designers and developers faced is to integrate a simple and nice tab navigation that not only don’t confuse, but helps visitors easily understand where they should be clicking.
Whether you are running a website or blog, tab navigation is probably one of the element that helps drives traffic to internal pages. Here we’ve compiled a mass list of 50+ nice clean and sleek CSS Tab-Based navigation samples you can adapt on your site. Full list after jump.
If you are web designer / developer, you might be interested in these few articles we’ve previously done:
- Javascripts Resources: 20+ Scripts, Tutorials and Frameworks
- Best Color Tools For Web Designers
- 11 Free Alternatives (Softwares) To Adobe Photoshop
- 22 Best Photoshop Text Effect Tutorials
- 18 Forums Web Designers Shouldn’t Missed
-
jQuery Coda-Slider
Nice sleek tabs that slides through each tab.
[demo]
-
Perspective Tabs
Simple mootools plug-in that allows for a large number of tabs to fit into a small space.
[demo]
-
jQuery idTabs
It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.
[demo]
-
Tab Accordian
Tab navigation with sleek animation using Moo FX.
[demo]
-
DHTML Goodies Tab Panes
Tab navigation with a close [x] button on each tab.
[demo]
-
AJAX Tabs (Rails redux)
Using Ajax to load information that does not need to be retrieved every time the user pulls the record.
[demo]
-
Ajax Project – Tabbed Page Interface
There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.
[demo]
-
JQuery Nested Tab Set
Nested tab set done with the ExtJS UI Library.
[demo]
-
Ajax Tab Reloaded
Taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.
[demo]
-
14 Free Vertical CSS Menus
Free nicely designed tabs from explodingboy.
[demo]
-
Control.Tabs
Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.
[demo]
-
JavaScript tabs with jQuery
jQuery plugin that lets you create JavaScript tabs very easily. Examples of simple tabs, custom tabs, slide effects, fade effects and callbacks demos available.
[demo]
-
Yahoo TabView
Sample tabs based on Yahoo UI Library.
[demo]
-
DHTML Ajax Tabs Content Script
This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an "IFRAME" mode, a "slideshow" mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more.
[demo]
-
JavaScript Tabifier
Automatically create an HTML tab interface using plug-and-play JavaScript.
[demo]
-
Tabtastic
This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.
[demo]
-
KollerMedia Tabmenu
Tabs for images as icon, changes when mouseover.
[demo]
-
dhtmlxTabber
dhtmlxTabbar is a JavaScript tabbar control for creating dynamic tabbed-navigation interface. This Ajax-enabled UI component lets you add feature-rich and nice looking tabs to your site or web application.
[demo]
-
Centered Tabs with CSS
We’re constrained to either left- or right-hand navigation. But what if we need a bit more flexibility? What if we need to place our navigation in the center?
[demo]
-
CSS Tab Designer
[Windows only] CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!
[demo]
-
Light Weight Low Tech CSS Tabs
An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.
-
Module Tabs – Carousel
Example of showing one page of content at at time in tabs. Each tab link scrolls to the page selected. Since all animation is turned off (animationSpeed = 0) then it just moves the desired content into view.
[demo]
-
Joshua Kaufman’s CSS Tab 2.0
Build CSS tabs without using any images or hacks and with as little CSS as possible.
[demo]
-
Tabbed Navigation using CSS
How to create low-bandwidth tab navigation on a web page using CSS.
[demo]
-
Duoh’s 2nd Level Tab Menu
[demo]
-
Nundroo CSS Navigation
[demo]
-
CSS Menu With Slider
This little example shows how to make really simple and yet very nice CSS Menu with slider.
[demo]
-
CSS drop down menu
Instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.
[demo]
-
Fancy Menu
Custom navigation bar with some cute Javascript effects that will certainly impress your friends.
[demo]
-
Creative Pony Sliding Tab
Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site.
[demo]
-
JQuery Tab Animation
A sample that show how you can add tab transition animations to your existing Tab Panel Controls.
[demo]
-
Fancy Sliding Tab Menu
Included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
[demo]
-
Sliding Door of CSS
Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites.
[demo]
-
Aplus ADxMenu
4 most basic examples of tab submenus.
-
Bulletproof Slants
[demo]
-
Core Design Magic Tabs
Nice tab plugin for Joomla.
[demo]
-
Brainjar Tabs
Using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space.
[demo]
-
qrayg CSS Menu
4 level deep list in both horizontal and vertical layout modes while maintaining hover persistence.
[demo]
-
Kalsey CSS Menu
[demo]
-
Accessible Image-Tab Rollovers
[demo]
-
HTML Dog CSS Tab
A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don’t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of image-only alternatives.
[demo]
-
CSS Tabs Menu with Dropdowns
Create dropdowns when the top level menu item is hovered over.
[demo]
-
DOMTab
DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any "back to top" links in the section and automatically hides all but the first one when the page is loaded.
[demo]
-
Animated horizontal tabs
These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab.
[demo]
-
Inverted Shift Down Menu
This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it.
[demo]
-
Inverted Shift Down Menu II
[demo]
-
Vista Aero Buttons Menu
This menu consists of a row of independent, Vista aero looking CSS buttons, and departs from the typical list based menu structure. Each button appears initially faded out slightly via CSS opacity, then brought back to full opacity during the "hover" state.
[demo]
-
DD Tab Menus

DD Tab Menu is a standards compliant, 2 level tab menu. Move your mouse over a tab, and a 2nd level content appears beneath it. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.
[demo]
-
EasyCFM DHTML Tab
[demo]
-
Flexible Tab Navigation
The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.
[demo]
-
jQuery UI/Tabs
[demo]
-
jQuery Thickbox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
[demo]
Related Contents |
Sponsors |
|
Posted by hongkiat in Graphics , at 06.23.08
Tags: css, javascript, jquery, navigation, tab, tabbing, xhtml |
|


























































Comments
Sangesh June 23rd, 2008
I just got one word for this article.
IMPRESSIVE
ReplySyahid A. June 24th, 2008
You really love list do you HK? Me too! You really cover a lot of grounds here. :D
Replycsstemplate June 24th, 2008
cool article, thz
ReplyWendy June 24th, 2008
Amazing! Thanks for the nice compilation :-)
ReplyJé Maverick June 24th, 2008
That’s quite an exhaustive list of resources. I’m going to have fun playing with a few of these. Thankyou, hongkiat.
ReplyJohn June 25th, 2008
Some great (an inspirational) examples here. :)
Thank you.
ReplyNot A Niche June 25th, 2008
What a great compilation! Thanks!
ReplyPablo June 25th, 2008
Awsome collection! thnx
ReplyCezary Tomczyk June 25th, 2008
I am impressed, especially as the collection is neatly organized.
ReplyTanju YILDIZ June 26th, 2008
Hmm. Great collections! Thanks.
Replywebmaster blog June 27th, 2008
nice information thanks..
ReplyTech news July 1st, 2008
cool collection. thanks mate
ReplyPeter July 7th, 2008
Excellent collection Thank you
ReplyCara July 8th, 2008
Just wondering if there was such a thing as a TWO ROW tab menu (imagine the options prompts in Windows) where the rows switch places based on the tab chosen….
ReplyDavid July 10th, 2008
A guy from a forum pointed me to this plugin:
http://www.wp-fun.co.uk/fun-with-sidebar-tabs/
It works for me. :)
ReplyArnii July 10th, 2008
This collection is very useful! Thanks….
Replykguske July 15th, 2008
How about an online theme generator for jQuery UI (includes Tabs)? Select your colors, patterns, etc., then download your theme – nice!
http://ui.jquery.com/themeroller
A nice addition to this useful list – thanks!
ReplyMark Abucayon July 16th, 2008
Great list of tabs In fact I used one of this tuts, I like it.
Replygaijun July 20th, 2008
good
Replyfoxy July 28th, 2008
Boring, show us something that we didn’t see!
ReplyRoger Licup August 2nd, 2008
Dude,
Replythat’s a pretty good collections ..your a life saver…
KEEP IT UP!!
Weddings Readings and Wedding Dresses August 5th, 2008
Wow, you got so many nice buttons here. I personally prefer your own here:P You are talented in your web design I love the way you lay out your works here. Keep up ya hard works. Love~
ReplyBrad August 12th, 2008
Most of these libraries won’t work as expected with the back button… it would be really nice to know up front which ones can. It’s a big step backwards in usability for the back button to go to the previous web site you were at 5 clicks ago!
ReplyTigere August 13th, 2008
Exceptional work! U r brilliant!
ReplyBobthebuilder September 1st, 2008
WOW those are some amazing links. keep up the good work
ReplyBunkai September 7th, 2008
I really like the way the tabbed navigation works at http://www.webtools.ca.gov. The only problem is, that I can’t seem to get their javascript to work properly for me. It seems to be doing everything now except displaying the sencond level of navigation links.
ReplyVivekanand September 12th, 2008
I have seen the lists, nice collection of tabs. I have developed Ajax based tabs, could you guys! please check them here – “Snippet Code for Simple Ajax Tabs with cool CSS Styles” – http://developersnippets.com/2007/05/19/snippet-code-for-simple-ajax-tabs-with-cool-css-styles/
ReplyWebdesign Internet Marketing September 18th, 2008
Very nice. Thanks for this post.
ReplyWebdesign Internet Marketing September 18th, 2008
Great post. Thank you very much.
Replychokilala September 21st, 2008
thanks a lot!
Replysophia October 17th, 2008
I’ve seen an ONLY CSS inline tabbed box on
http://geibi.de/wp
named cssOnlyTabs
No Javascript, no :target and it’s working in IE and FF which some examples here don’t!
Note: The Version to download is for Wordpress, but you can easily extract the needed HTML-Code from the readme and css from the file.
ReplyDork November 1st, 2008
Wow – this was so helpful in showing the power of tab-nav.
You probably get tired of hearing this, but this really is an awesome article!
ReplyIcon November 4th, 2008
Excellent post! You made a great complete list of this CSS tabs.
ReplyThanks.
Marc Falk November 5th, 2008
Great resource! Thank you.
ReplyErhanry November 6th, 2008
Great Stuff !!
ReplyMostafiz November 12th, 2008
Thank you..Thank you ve**ry Much
ReplyP@W November 26th, 2008
good
Replythe best December 11th, 2008
nice and very difficult to make a decision. Almost beautiful.
ReplyBen December 13th, 2008
This list you provide here is one of the best accross the web. I’ll definitely come back here anytime I’ll be looking for tab-based navigation.
Replybalaji December 16th, 2008
Its really superb. The script are really exciting to view and to work.
Replyensar December 18th, 2008
süper ötesi! teşekkürler;)
Replyjosh December 23rd, 2008
Nice work..toatlly impressed by clean and good work. thansk for sharing all..keep doing great work..
ReplyPixelate Webdesign January 2nd, 2009
Thanks a lot! great stuff!
ReplyLily January 8th, 2009
Fantastic article, really helpfull, very impressive – Thank u
Replyluxury furniture January 12th, 2009
super! i hope one day you will publish also one super long list of nice TABS SCRIPTS also for VERTICAL TABS and not only HORIZONTAL TABS :)
Replystrony internetowe kraków January 14th, 2009
Great list, it helps clear up much of the htacess mystery and confusion that comes from creating such files.
ReplyÜnsal Taşan January 16th, 2009
May Allah mercy and give loads of deeds to whomever combined those all from the internet…
Turkish : Bunları hazırlayıp toplayandan derleyenden, Allah razı olsun :)
Replyvijay January 25th, 2009
very nice demo version. and good i like it. Thank You for new update and give us to use.
ReplyRicky February 15th, 2009
Does anyone know how to add image hover and visited to the tabs in Tab Accordian?
ReplyThanks,
HARDMID March 4th, 2009
Fantastic! Thank you for your valuable and irreplaceable works!
Replyraman March 6th, 2009
Only One Word “Fantastic!”
ReplySohoInteractive April 23rd, 2009
what a great collection.
Thank you for your time.
T.
Replydeadwin May 5th, 2009
Hey thanx buddy….
Replytabela May 5th, 2009
thank you
ReplyBUDI May 28th, 2009
Trims a lot for evrything in this page, MGBU
ReplySimon Kenyon Shepard June 8th, 2009
I’m a big fan of these remarkably elegant solutions, they really do make an interface that much more intelligent, I do however
think there is a problem in that hiding content like this is actually bad for user experience if one comes from a search engine searching for hidden content.
I wrote a blog post about it a few months ago:
A fundamental problem with Ajax websites and hiding content
and created a follow up suggestion for a solution to deal with these problems:
smartTabs :: SEO friendly AJAX tabs
Replywebdevvote.com June 18th, 2009
You are voted!
ReplyTrack back from WebDevVote.com
Seb June 20th, 2009
Hi there,
I’ve just finished the new tutorial on how to create 3 state tabbed navigation – have a look: 3 state tabs navigation
ReplyTrackbacks