HTML & CSS - - By Jennifer Farley

Tabbed Navigation: Examples & Scripts

Tabbed style navigation has been a staple of web design for many years now. It is used frequently by designers because it is clean and organized way to provide links to different sections on a site. Due to its use in the offline world most people tend to relate well to the idea of a tab representing a section of a site.

What is tabbed navigation?

Tabbed navigation is a set of buttons where the tabs usually (but not always) run horizontally. At its simplest, an “open” tab matches the color of the background of the section it is attached to while all the other “closed” tabs are a different color – generally lighter or darker than the open tab.

Japan News Aggregator

JapanNEws

The style of the tabs varies from the squared corner tabs such as seen 23 And Me to more elaborate rounded corners with bevels, strokes and inner tabs such as on the Color Therapy by Filter site.

23andMe

23 And Me tabs

ColorTherapy

Color Therapy by Filter

Here’s some more examples of tabbed navigation in action:

The UCSAA uses a colorful vertical set of tabs.

UCSAA

Bert Timmerman’s site has some textured and arrow-tail shaped tabs.

BertTimmermans

Vyniknite uses large tabs on its main content area.

vynykite

What a lovely name uses a variation on the square tabs.

lovelyname

Komodo media has a tabbed sidebar navigation.

komodo

Veer’s tabbed navigation conveys a sense of depth by using different color tabs with drop shadows applied.

Veer

Threadless Kids uses rollover tabs which also change the image in each section

ThreadlessKids

Tabbed Navigation Scripts

There are tons of javascript solutions available for creating tabbed navigation. Here’s a few that range from the simple to the slightly more complex and sophisticated.

Slidedeck is a very nice jQuery based slideshow which uses vertical tabs. You can put any type of content within the container and use the tabs to navigate through. There is a free “Light” version available as well as a commercial Pro version.

Slidedeck

Coda slider is another free jQuery slider with tabbed navigation along the top.

CodaSlider

ID Tabs is a simple tabbed menu system created with jQuery.

IDTabs

DhtmlxTabbar is a javascript control for creating dynamic tabbed-navigation interfaces, available as a free or professional edition.

dhtmlTabber

Do you like tabbed navigation, do you use it on your own site? Have you seen some nice examples that you’d like to share?

Sponsors