30 CSS and Javascript Tabs Plugins and Tutorials

Tabs have been around for a long time, they are nothing new, but with so many sites (blogs, ecommerce sites, web apps…) needing to show as much content and navigation as possible, they have never been so relevant.

They are the perfect web page tidying up solution for organizing cluttered content in a space-limited web page. Separating content into tabs keeps everything nice and compact, clutter free and are always at the ready should a user need it.

In this roundup we have a variety of Javascript tabs plugins and tutorials to help you build cross-browser tabs. You will also find some innovative pure CSS solutions as well.

Javascript Tabs Plugins

mb.tabset jQuery Plugin

mb.tabset jQuery Plugin

mb.tabset is a useful component that lets you build a tabbed interface really quickly and easily; and you can even sort your tabs as you want by dragging and dropping.

mb.tabset →Demo →

SimpleTabs MooTools Plugin

SimpleTabs MooTools Javascript tabs Plugin

Small, simple and unobtrusive Tab plugin for MooTools including support for Ajax content. Overlays semantic XHTML markup with a tabbed interface without additional changes. Customise the style and behaviour by changing the simplified CSS or via various custom Events.

SimpleTabs →Demo →

Perspective Tabs Mootools Plugin

Perspective Tabs Mootools Plugin<

Perspective tabs (formerly Sliding Tabs) is a simple MooTools plug-in that allows for a lagre number of tabs to fit into a small space. Thanks for visiting my site.

Perspective Tabs →Demo →

MooTabs MooTools Plugin

MooTabs MooTools Javascript tabs

MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it's main purpose is to help out with the creation of simple tab navigation. As of version 1.2, you can also set tab content via an Ajax request.

MooTabs →Demo →

idTabs jQuery Plugin

idTabs jQuery Plugin

idTabs →Demo →

DOMTab – Navigation tabs with CSS and DOMscripting

DOMTab - Navigation tabs with CSS and DOMscripting

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. You can use as many tabbed menus on the page as you want to.

DOMTab – Navigation tabs with CSS and DOMscripting →Demo →

jQuery UI Tabs

jQuery UI Tabs

jQuery UI Tabs →Demo →

jQuery Accessible Tabs Plugin

jQuery Accessible Tabs Plugin

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

jQuery Accessible Tabs Plugin →Demo →

Tabify jQuery Plugin

Tabify jQuery Plugin

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.

Tabify jQuery Plugin →Demo →

nanotabs

nanotabs

nanotabs →Demo →

jQuery Pager

jQuery Pager

jQuery Pager →Demo →

jQueryGlobe

jQueryGlobe

This tiny (2kb) slick jQuery plugin enables simple and easy creation of an interactive "Featured Items" widget.

jQueryGlobe →Demo →

Pure CSS Tabs Tecniques & Tutorials

Sweet Tabbed Navigation Bar using CSS3

Sweet Tabbed Navigation Bar using CSS3

Sweet Tabbed Navigation Bar using CSS3 →Demo →

CSS3-Only Tabbed Area

CSS3-Only Tabbed Area

CSS3-Only Tabbed Area →Demo →

Using CSS to Create a Tabbed Content Area

Using CSS to Create a Tabbed Content Area

Using CSS to Create a Tabbed Content Area →Demo →

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript

CSS3 Hover Tabs without JavaScript →Demo →

Javascript Based Tabs Tutorials

Sweet AJAX Tabs jQuery Plugin

Sweet AJAX Tabs jQuery Plugin

Sweet AJAX Tabs →Demo →

Animated Tabbed Content jQuery Plugin

Animated Tabbed Content jQuery Plugin

Animated Tabbed Content →Demo →

Sliding Tab Menu for Sidebar jQuery Plugin

Sliding Tab Menu for Sidebar jQuery Plugin

Sliding Tab Menu for Sidebar →Demo →

Organic Tabs jQuery Plugin

Organic Tabs jQuery

Organic Tabs →Demo →

Slot Machine Tabs jQuery Plugin

Slot Machine Tabs jQuery Plugin

Slot Machine Tabs →Demo →

Create Flipping Content Tabs jQuery Plugin

Create Flipping Content Tabs jQuery Plugin

Create Flipping Content Tabs →Demo →

Create A Tabbed Interface jQuery Plugin

Create A Tabbed Interface jQuery Plugin

Create A Tabbed Interface →Demo →

jQuery UI Tabs with Next/Previous (jQuery UI)

jQuery UI Tabs with Next/Previous  (jQuery UI)

jQuery UI Tabs with Next/Previous →Demo →

Building a Better Blogroll: Dynamic Fun (jQuery & SimplePie)

Building a Better Blogroll: Dynamic Fun (jQuery & SimplePie)

Building a Better Blogroll: Dynamic Fun →Demo →

Moving Tab and Sliding Content jQuery Plugin

Moving Tab and Sliding Content jQuery Plugin

Moving Tab and Sliding Content →Demo →

Slick Tabbed Content Area jQuery Plugin

Slick Tabbed Content Area jQuery Plugin

Slick Tabbed Content Area →Demo →

Sexy Animated Tabs MooTools Plugin

Sexy Animated Tabs MooTools Plugin

Sexy Animated Tabs →Demo →

Tabbed Interface / Tabbed Structure Menu jQuery Plugin

Tabbed Interface / Tabbed Structure Menu jQuery Plugin

Tabbed Interface / Tabbed Structure Menu →Demo →

Fancy Sliding Form jQuery Plugin

Fancy Sliding Form jQuery Plugin

Fancy Sliding Form →Demo →

Simple Tabs jQuery Plugin

Simple Tabs jQuery Plugin

Simple Tabs →Demo →

Author: (584 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments