Good Tab Based Navigation

ExpressionEngine
This tab set is beautifully styled. It uses a bevel to seperate tabs, large buttons, and clean typography with icons.

Astratos
Another tab navigation that is clean because of rounded corners and use of a gradient to style.

WorldCat
Rounded corners and clean separation.

Veer
These tabs have beautiful styling. Notice the use of different colors and a drop shadow for separation purposes.

365 Days of Astronomy
Use of different colors and a drop shadow to separate the tabs not in use.

Wire & Twine
This is some excellent texture use with a clean layout.

Komodo
A good example of tabs used in a module.

Inkd
Good styling and usable because of size and separation.

Jepco Storage
This button set uses dark colors to fade out the tabs not in use, and a great border on the buttons.

Kinder-Aktuell
Good gradient use and separation.

FidesVita
Tabs used with a sub navigation.

Apple Movie Trailers
Excellent styling and a strong example of a vertical tab layout.

PBwiki
Simple yet clean tabs.

Fancast
Another vertical tab set up, this time used in a slider instead of content navigation.

College Park Church
Nicely styled tabs with good colors and a sub navigation.

One Button Mouse
Excellently designed buttons in a simple tab layout with good icons as a visual support.

Mint
Tabs used in a very content heavy module

District Solutions
Vertical tabs are used very rarely. But they can look good!

23andMe
Good coloring and use of a border to differentiate the tabs from the body background.

Tumblon
Very clean tabs with a border.

STUDIO7DESIGNS
This tab styling uses a gradient for a cool fading appearance, and a sub navigation is included.

WWD
A simple yet usable tab system with a sub navigation.

Ministry of Sound
On this tab system, a gradient is used to add depth to the selected button.

Disambiguity
Use of rounded corners and a strong color difference to separate the tabs not in use.

Fontcase
A clean tab layout in a very nice design.

Mixx
This tab system uses a different size, color, and styling to bring out the button selected.

Concentric Studio
A very simple and usable tab navigation.

Domestika
A vertical tab layout with coloring.

crowdSPRING
A simple tab system. This one uses a large size as well as a different color to make the selected button pop.

Ready Made
A well-styled tabbed navigation.

The Mindset Game
Another very simple and easy tab navigation that works perfectly.

nclud
A little bit different tab setup that only styles the selected button.

The Invoice Machine
The navigation below uses a strong color difference, usable buttons, and borders to separate tabs from the rest of the design.

FreeAgent
A good example of the background of the container flowing with the button.

Web Notes
This is very organized, and it appears to tab down instead of up like most.

Magpie
Doesn’t get much more simple than this, but still a good example.

Two December
Nice styling that works perfectly with the rest of the layout.

Lanbruck’s
Another very beautiful tab layout, notice the slight hover effect that can be seen on the second tab over.

LittleLines
This is one of the better examples of styling in this showcase because of the gradients to add dimension to the buttons and strong borders.

Thuiven
A very nice color harmony and contrast between the selected tab and the others.

Headscape
Another button that uses a gradient to fade out, creating an awesome appearance.

Space Collective
Very simple but functional at the same time.

Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.

Designsensory
Very basic styling with strong colors and a sub navigation.

Ad Fed
Here is another smooth and visually appealing tab navigation set.

OS Communications
Basic color-based styles with a pointer to show the selected tab.

Hoefler and Frere - Jones
Use of slanted sides instead of rounded corners makes this tab-based navigation interesting and unique.

Track My People
These buttons use gradients for depth, and a drop shodow to add demension to the tabs behind the selected one.

Revolution Drviving
Brilliant button backgrounds that aren’t over the top make these tabs really great.

City of Grace
A good example of tabs that work nice colors into a usable layout.

About the author

Matt Cronin is a freelance web and graphic designer as well as developer. He is the author and owner of Spoonfed Design,a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new startup in progress with new services coming soon.

Popularity: 2% [?]