About The Author

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does … More about Matt

Showcase Of Well-Designed Tabbed Navigation

Quick Summary

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout. [Links checked February/10/2017] So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline. When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

Table of Contents
Membership counter

Members support Smashing

Wonderful, friendly people who keep this lil' site alive — and get smarter every day.

Are you smashing, too? →

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

Screenshot

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

Further Reading on SmashingMag:

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button.

This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks.

So, with all of that in mind, take a look at these 50 excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

Good Tab Based Navigation in 2009

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

Screenshot

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

Screenshot

WorldCat Rounded corners and clean separation.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

Komodo A good example of tabs used in a module.

Screenshot

Inkd Good styling and usable because of size and separation.

Screenshot

Kinder-Aktuell Good gradient use and separation.

Screenshot

FidesVita Tabs used with a sub navigation.

Screenshot

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

Screenshot

PBwiki Simple yet clean tabs.

Screenshot

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

Screenshot

Mint Tabs used in a very content heavy module

Screenshot

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

Screenshot

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

Screenshot

Tumblon Very clean tabs with a border.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

Concentric Studio A very simple and usable tab navigation.

Screenshot

Domestika A vertical tab layout with coloring.

Screenshot

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

Screenshot

Ready Made A well-styled tabbed navigation.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

Space Collective Very simple but functional at the same time.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot