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.

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

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

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.

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

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

Pan Kok

I just want to correct some information in the arcticle. ‘Vynikite’ should be ‘Vyniknite’ in the link to vyniknite.sk. But nice article though

http://www.brothercake.com/ brothercake

You don’t need scripting to implement tabbed navigation – you can do it with pure CSS via the :target pseudo-class (our own 99designs uses such a tab-box in the buyer interface, though of course it’s also supplemented with scripting so that it works in IE).

Opera is even intelligent enough not to scroll the page to the target, something I’d very much like to see other browsers taking after :-)

baileylo

JQuery UI Tabs is another “easy” to implement one. It’s not exactly tab navigation, but you can set each tab to pull a new request and cache so in theory it could be used for tab navigation.