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.
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.
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 (thanks, Allen).
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.
You may want to take a look at the following related posts:
- Designing Drop-Down Menus: Examples and Best Practices2
- 50 Beautiful And User-Friendly Navigation Menus3
- Navigation Menus: Trends and Examples4
Good Tab Based Navigation Link
Another tab navigation that is clean because of rounded corners and use of a gradient to style.
Very clean tabs with a border.
Use of rounded corners and a strong color difference to separate the tabs not in use.
Doesn’t get much more simple than this, but still a good example.
A very nice color harmony and contrast between the selected tab and the others.
Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.
- 1 http://www.geticeberg.com/
- 2 /2009/03/24/designing-drop-down-menus-examples-and-best-practices/
- 3 /2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
- 4 /2008/02/26/navigation-menus-trends-and-examples/
- 5 http://expressionengine.com/
- 6 http://expressionengine.com/
- 7 http://www.worldcat.org/
- 8 http://www.worldcat.org/
- 9 http://www.veer.com/
- 10 http://www.veer.com/
- 11 http://365daysofastronomy.org/
- 12 http://365daysofastronomy.org/
- 13 http://www.wireandtwine.com/
- 14 http://www.wireandtwine.com/
- 15 http://www.komodomedia.com/
- 16 http://www.komodomedia.com/
- 17 http://inkd.com/default
- 18 http://inkd.com/default
- 19 http://www.kinder-aktuell.de/
- 20 http://www.kinder-aktuell.de/
- 21 http://www.fidesvita.org/
- 22 http://www.fidesvita.org/
- 23 http://www.apple.com/trailers/paramount/eagleeye/
- 24 http://www.apple.com/trailers/paramount/eagleeye/
- 25 http://pbwikimanual.pbwiki.com/
- 26 http://pbwikimanual.pbwiki.com/
- 27 http://www.fancast.com/
- 28 http://www.fancast.com/
- 29 http://www.designologue.com/mint/
- 30 http://www.designologue.com/mint/
- 31 http://www.districtsolutions.co.uk/candidates/
- 32 http://www.districtsolutions.co.uk/candidates/
- 33 https://www.23andme.com/
- 34 https://www.23andme.com/
- 35 http://www.studio7designs.com/portfolio/
- 36 http://www.studio7designs.com/portfolio/
- 37 http://www.wwd.com/
- 38 http://www.wwd.com/
- 39 http://www.ministryofsound.com/
- 40 http://www.ministryofsound.com/
- 41 http://concentric-studio.com/work/
- 42 http://concentric-studio.com/work/
- 43 http://domestika.org/coolsites
- 44 http://domestika.org/coolsites
- 45 http://www.crowdspring.com/
- 46 http://www.crowdspring.com/
- 47 http://www.readymade.com/
- 48 http://www.readymade.com/
- 49 http://themindsetgame.com/
- 50 http://themindsetgame.com/
- 51 http://nclud.com/
- 52 http://nclud.com/
- 53 http://invoicemachine.com/home
- 54 http://invoicemachine.com/home
- 55 http://www.freeagentcentral.com/
- 56 http://www.freeagentcentral.com/
- 57 http://www.webnotes.net/
- 58 http://www.webnotes.net/
- 59 http://twodecember.com/en/products/
- 60 http://twodecember.com/en/products/
- 61 http://www.lanbruk.com.au/
- 62 http://www.lanbruk.com.au/
- 63 http://www.littlelines.com/
- 64 http://www.littlelines.com/
- 65 http://www.headscape.co.uk/
- 66 http://www.headscape.co.uk/
- 67 http://spacecollective.org/
- 68 http://spacecollective.org/
- 69 http://designsensory.com/
- 70 http://designsensory.com/
- 71 http://www.adfed.org/
- 72 http://www.adfed.org/
- 73 http://www.typography.com/home/index.php?affiliateID=
- 74 http://www.typography.com/home/index.php?affiliateID=
- 75 http://www.revolutiondrivingtuition.co.uk/
- 76 http://www.revolutiondrivingtuition.co.uk/
- 77 http://mesa.cityofgrace.com/
- 78 http://mesa.cityofgrace.com/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.