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

1. jQuery Coda-Slider

   

   Nice sleek tabs that slides through each tab.

   [demo]

2. Perspective Tabs

   

   Simple mootools plug-in that allows for a large number of tabs to fit into a small space.

   [demo]

3. jQuery idTabs

   

   

   It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

   [demo]

4. Tab Accordian

   

   Tab navigation with sleek animation using Moo FX.

   [demo]

5. DHTML Goodies Tab Panes

   

   Tab navigation with a close [x] button on each tab.

   [demo]

6. AJAX Tabs (Rails redux)

   

   Using Ajax to load information that does not need to be retrieved every time the user pulls the record.

   [demo]

7. 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]

8. JQuery Nested Tab Set

   

   Nested tab set done with the ExtJS UI Library.

   [demo]

9. 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]

10. 14 Free Vertical CSS Menus

    

    Free nicely designed tabs from explodingboy.

    [demo]

11. 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]

    

12. 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]

13. Yahoo TabView

    

    Sample tabs based on Yahoo UI Library.

    [demo]

14. 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]

15. JavaScript Tabifier

    

    Automatically create an HTML tab interface using plug-and-play JavaScript.

    [demo]

16. 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]

    

17. KollerMedia Tabmenu

    

    Tabs for images as icon, changes when mouseover.

    [demo]

18. 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]

19. 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]

20. 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]

21. Light Weight Low Tech CSS Tabs

    

    An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.

    [demo 1, 2]

22. 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]

23. Joshua Kaufman’s CSS Tab 2.0

    

    Build CSS tabs without using any images or hacks and with as little CSS as possible.

    [demo]

24. Tabbed Navigation using CSS

    How to create low-bandwidth tab navigation on a web page using CSS.

    [demo]

    

25. Duoh’s 2nd Level Tab Menu

    

    [demo]

26. Nundroo CSS Navigation

    

    [demo]

27. CSS Menu With Slider

    

    This little example shows how to make really simple and yet very nice CSS Menu with slider.

    [demo]

28. 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]

29. Fancy Menu

    

    Custom navigation bar with some cute Javascript effects that will certainly impress your friends.

    [demo]

30. 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]

31. JQuery Tab Animation

    

    A sample that show how you can add tab transition animations to your existing Tab Panel Controls.

    [demo]

32. 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]

33. 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]

34. Aplus ADxMenu

    

    4 most basic examples of tab submenus.

    [demo 1, 2, 3, 4]

35. Bulletproof Slants

    

    [demo]

36. Core Design Magic Tabs

    

    Nice tab plugin for Joomla.

    [demo]

37. 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]

38. qrayg CSS Menu

    

    4 level deep list in both horizontal and vertical layout modes while maintaining hover persistence.

    [demo]

39. Kalsey CSS Menu

    

    [demo]

40. Accessible Image-Tab Rollovers

    

    [demo]

41. 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]

42. CSS Tabs Menu with Dropdowns

    

    Create dropdowns when the top level menu item is hovered over.

    [demo]

43. 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]

44. 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]

45. Inverted Shift Down Menu

    

    This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it.

    [demo]

46. Inverted Shift Down Menu II

    

    [demo]

47. 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]

48. 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]

49. EasyCFM DHTML Tab

    

    [demo]

50. Flexible Tab Navigation

    

    The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript.

    [demo]

51. jQuery UI/Tabs

    

    [demo]

52. 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]

Veamos unos cuantos de estos sistemas:

• Ajax Drop down Tab Menu…
• CSS Play Mini Tabs
• jQuer Tab Skin
  
• Sliding Tabs
  
• Coda Slider
  
• Tab Accordian
  
• Perspective Tabs
  
• Scrolling Tabs
  
• jQuery idTabs
• Rotating UI Tabs
• Floating Window with Tabs
• Closable Tabs
• Paged Tab Menu
• Draggable Tabs
• Fancy Sliding Tab Menu
• Carousel Tab
• Moo Tabs
• jQuiery UI Tab
• Ajax Tabber
• Nested Tabs
  
• Moo Fx Two Column Accordian
• Moo Fx Horizontal Accordian
• Hover Accordian
• Draggable Accordion
• Simple Javascript Accordian
• Moo Tool Accordian
• Accordion v2.0
• Yet Another Mootool Accordion
• Completely Flexible Accordion
• Horizontal Accordion

Popeye generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site …

BarackSlideshow Demo

A slideshow as the one seen on Barack Obama’s website, based on Mootools.

jCarouselDemo

A jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

noobSlideDemo

Based on Mootools. Numerous variations and customizations.

//
//

SpaceGalleryDemo

A jQuery plugin.

Agile CarouselDemo

A jQuery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Simple Controls Gallery Demo

A jQuery plugin that rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery. They allow the user to play/pause, or step through to a specific image within the gallery. Last but not least, the gallery supports persistence of the last viewed image via session cookies, so going away then coming back to the gallery calls up the last viewed image within a browser session.

Animated JavaScript SlideshowDemo

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.

Easy POP Show

This jQuery plugin is for full screen show of slides, news, …

jQuery Animated InnerfadeDemo

An animated slide show based on the work of Torsten Baldes : Innerfade, with additional functions: slide effect on large images, ‘prev’, ‘pause’, ‘next’ functions, an optional background frame, a title panel

Multidirections Image ScrollerDemo

This simple jQuery plugin provide to create an multidirectional image scroller with mouse events

PikachooseDemo

Pikachoose is a lightweight Jquery Image Gallery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed, easy to setup, and well� all around easy. Creating an javascript image gallery shouldn�t be a complex thing.

uGalleryDemo

A simple jQuery plugin with nice transitions, really easy to setup and use, server-side scripting friendly.

jQuery Slinky SliderDemo

Slinky Slider loads a user defined number of HTML files into “panels”. The panels are stacked up horizontally inside a nominated container. Once the panels have been loaded, all bar one are collapsed to a clipped small size. An automatic animation cycles through the panels showing the content of each in turn. When the user mouses over a panel, it expands and the automatic animation stops. The panel content can be full HTML, flash or other media, or just plain image references.

jQuery Easy SliderDemo

Photo SliderDemo

Simple to use JavaScript slide show that scrolls thumbnails as smooth as Flash.

jQuery Gallery View II

It takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

Galleriffic

Galleriffic was inspired by Mike Alsup’s jQuery Cycle plugin, but with performance in mind for delivering a high volume of photos.

jQuery Image Cube Demo

Sets a division to rotate between contained images as if they were on the faces of a cube. You can also “rotate” blocks of text if you want. You have control over the direction and speed of the rotations.

JMyCarousel

JMyCarousel is a free, highly customizable, non obstrusive image carousel. It has been created to suit a maximum of needs. It enables to display a list or gallery of images in a dynamic way,can be adapted very easily to any layout, and the way it animates the picture is adaptable.

slideViewer

slideViewer is a lightweight (1.5Kb) plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images. Works with jQuery 1.2 and jquery.easing.1.2

Step Carousel ViewerDemo

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps.

(a)SlideshowDemo

This jQuery plugin allows you to create dynamic, controllable slideshows or presentations for your website.

jQuery.SerialScrollDemo

This jQuery plugin allows you to easily animate any series of elements, by sequentially scrolling them.

CrossSlide Demo

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash� or other proprietary plugins. Animations supported range from a static image cross-fade to complex “zoom & pan” or “Ken Burns” effects.

flickrGalleryDemo

The purpose of this plugin is to allow for a dynamic image gallery that is easy to add or remove images from. Once the gallery is added to a website, the code doesn’t need to be changed again to update images. Everything, including image captions, is updated from Flickr.

MopSliderDemo

Any number of items can be put in MopSlider, setting is very simple & easy to use.

YCodaSliderDemo

This script helps you present your content with a tabbed menu + previous-next buttons to switch between tabs.

Slideshow 2!

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

//
//

Ultimate JavaScript Slider and Scroller Demo

This versatile and lightweight JavaScript makes it easy to scroll text blocks, create slideshows, slide between content, create tickers and more.

YUI-based Slideshow Demo

This slideshow is based on YUI, Yahoo’s javascript library. You can choose in different classes of trasitions: sliding, fading, squeezing.

Control.Tabs

Although this one is intended for tabs, it could be used for thumbed/tabbed slideshows. Based on Mootools.

Lightweight Image Gallery with Thumbnails Demo

As the title says. Simple, standalone, yet effective.