Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Showcase Of Well-Designed Tabbed Navigation

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.

Screenshot1

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:

Good Tab Based Navigation Link

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

Screenshot6

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

Screenshot

WorldCat7
Rounded corners and clean separation.

Screenshot8

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

Screenshot10

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

Screenshot12

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

Screenshot14

Komodo15
A good example of tabs used in a module.

Screenshot16

Inkd17
Good styling and usable because of size and separation.

Screenshot18

Kinder-Aktuell19
Good gradient use and separation.

Screenshot20

FidesVita21
Tabs used with a sub navigation.

Screenshot22

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

Screenshot24

PBwiki25
Simple yet clean tabs.

Screenshot26

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

Screenshot28

Mint29
Tabs used in a very content heavy module

Screenshot30

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

Screenshot32

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

Screenshot34

Tumblon35
Very clean tabs with a border.

Screenshot36

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

Screenshot38

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

Screenshot40

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

Screenshot42

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

Screenshot

Concentric Studio43
A very simple and usable tab navigation.

Screenshot44

Domestika45
A vertical tab layout with coloring.

Screenshot46

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

Screenshot48

Ready Made49
A well-styled tabbed navigation.

Screenshot50

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

Screenshot52

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

Screenshot54

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

Screenshot56

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

Screenshot58

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

Screenshot60

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

Screenshot62

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

Screenshot64

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

Screenshot66

LittleLines67
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.

Screenshot68

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

Screenshot70

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

Screenshot72

Space Collective73
Very simple but functional at the same time.

Screenshot74

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

Screenshot

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

Screenshot76

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

Screenshot78

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

Screenshot80

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

Screenshot82

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

Screenshot84

Footnotes Link

  1. 1 http://www.geticeberg.com/
  2. 2 /2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  3. 3 /2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  4. 4 /2008/02/26/navigation-menus-trends-and-examples/
  5. 5 http://expressionengine.com/
  6. 6 http://expressionengine.com/
  7. 7 http://www.worldcat.org/
  8. 8 http://www.worldcat.org/
  9. 9 http://www.veer.com/
  10. 10 http://www.veer.com/
  11. 11 http://365daysofastronomy.org/
  12. 12 http://365daysofastronomy.org/
  13. 13 http://www.wireandtwine.com/
  14. 14 http://www.wireandtwine.com/
  15. 15 http://www.komodomedia.com/
  16. 16 http://www.komodomedia.com/
  17. 17 http://inkd.com/default
  18. 18 http://inkd.com/default
  19. 19 http://www.kinder-aktuell.de/
  20. 20 http://www.kinder-aktuell.de/
  21. 21 http://www.fidesvita.org/
  22. 22 http://www.fidesvita.org/
  23. 23 http://www.apple.com/trailers/paramount/eagleeye/
  24. 24 http://www.apple.com/trailers/paramount/eagleeye/
  25. 25 http://pbwikimanual.pbwiki.com/
  26. 26 http://pbwikimanual.pbwiki.com/
  27. 27 http://www.fancast.com/
  28. 28 http://www.fancast.com/
  29. 29 http://www.designologue.com/mint/
  30. 30 http://www.designologue.com/mint/
  31. 31 http://www.districtsolutions.co.uk/candidates/
  32. 32 http://www.districtsolutions.co.uk/candidates/
  33. 33 https://www.23andme.com/
  34. 34 https://www.23andme.com/
  35. 35 http://tumblon.com/
  36. 36 http://tumblon.com/
  37. 37 http://www.studio7designs.com/portfolio/
  38. 38 http://www.studio7designs.com/portfolio/
  39. 39 http://www.wwd.com/
  40. 40 http://www.wwd.com/
  41. 41 http://www.ministryofsound.com/
  42. 42 http://www.ministryofsound.com/
  43. 43 http://concentric-studio.com/work/
  44. 44 http://concentric-studio.com/work/
  45. 45 http://domestika.org/coolsites
  46. 46 http://domestika.org/coolsites
  47. 47 http://www.crowdspring.com/
  48. 48 http://www.crowdspring.com/
  49. 49 http://www.readymade.com/
  50. 50 http://www.readymade.com/
  51. 51 http://themindsetgame.com/
  52. 52 http://themindsetgame.com/
  53. 53 http://nclud.com/
  54. 54 http://nclud.com/
  55. 55 http://invoicemachine.com/home
  56. 56 http://invoicemachine.com/home
  57. 57 http://www.freeagentcentral.com/
  58. 58 http://www.freeagentcentral.com/
  59. 59 http://www.webnotes.net/
  60. 60 http://www.webnotes.net/
  61. 61 http://www.be-a-magpie.com/
  62. 62 http://www.be-a-magpie.com/
  63. 63 http://twodecember.com/en/products/
  64. 64 http://twodecember.com/en/products/
  65. 65 http://www.lanbruk.com.au/
  66. 66 http://www.lanbruk.com.au/
  67. 67 http://www.littlelines.com/
  68. 68 http://www.littlelines.com/
  69. 69 http://www.thuiven.com/
  70. 70 http://www.thuiven.com/
  71. 71 http://www.headscape.co.uk/
  72. 72 http://www.headscape.co.uk/
  73. 73 http://spacecollective.org/
  74. 74 http://spacecollective.org/
  75. 75 http://designsensory.com/
  76. 76 http://designsensory.com/
  77. 77 http://www.adfed.org/
  78. 78 http://www.adfed.org/
  79. 79 http://www.typography.com/home/index.php?affiliateID=
  80. 80 http://www.typography.com/home/index.php?affiliateID=
  81. 81 http://www.revolutiondrivingtuition.co.uk/
  82. 82 http://www.revolutiondrivingtuition.co.uk/
  83. 83 http://mesa.cityofgrace.com/
  84. 84 http://mesa.cityofgrace.com/
SmashingConf New York

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.

↑ Back to top Tweet itShare on Facebook

Advertisement

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

  1. 1

    Nice showcase !!

    find more treasure for us :)

    ——-HUKYHOME.COM

    0
  2. 2

    Really great selection.

    1
  3. 3

    one word: wow!

    1
  4. 4

    very nice!

    -1
  5. 5

    Brian Temecula

    April 6, 2009 3:40 pm

    Nice tabs, but my favorite tabs are like the ones on this template:

    http://www.openwebdesign.org/viewdesign.phtml?id=3856

    -4
    • 6

      Very nice look, but doesn’t it bother you to have to point precisely at text to use a link? (rather than simply anywhere within the tab/button itself)

      0
  6. 7

    Know what I really wish SM would do? I’d love to see BAD examples of some of these things, to illustrate what NOT to do, and compare them to the good examples.

    0
  7. 8

    Russell Heimlich

    April 6, 2009 4:13 pm

    where were the bad tab based navigation examples?

    0
  8. 9

    “The extensive amount of roads you can take in web design, specifically in navigation.” … what the?.. did anyone proof read this copy.. half of it doesn’t make sense.

    1
  9. 10

    Guys, refer to the name of the article: “Showcase Of Well-Designed Tabbed Navigation” found in the “Showcases” section. The article would have been in the “How To” section of the website were it going to display badly designed tabs to boot. I found the article pretty cool, gives alot of ideas of how to do tabs. I have noticed SM becoming increasingly aggressive the past few articles (Tho sometimes very very justified)

    0
  10. 11

    The linked sites are helpful, but the text of this article is atrocious. The first sentence doesn’t even have a verb, and the first paragraph has several grammatical errors. Has no one edited this article? The author certainly didn’t.

    1
  11. 12

    Matt Cronin

    April 6, 2009 5:41 pm

    Hi all,

    Sorry about the error in the first sentence. I have contacted the editor and it will be fixed shortly.

    Enjoy the post!

    0
  12. 13

    Very nice! Sorry to see you missed out on BaseNet.
    How about a post on how to create nice tabs and what ajax library to use?!

    0
  13. 14

    thanks sm for your usefull topic :)

    0
  14. 15

    Pretty good article,

    But I feel I always see the same websites over and over again. Kind of tired to see the mac style ruling on every post. Let’s have some breathe of fresh air on SM!

    0
  15. 16

    Umm, why is Disambiguity listed up there? All it uses is a Woothemes wordpress theme, with very little modification.

    0
  16. 17

    Creamy CSS Showcase

    April 6, 2009 10:30 pm

    Special thanks for really big and inspirational list of good practice of tabbed navigation,.. a lot of good works to see.

    Helpful and interesting post! ;)

    0
  17. 18

    Thank you, a good post as usual.

    You needn’t have posted so many! It would be better to show 5 really good ones, 5 usual ones and 5 bad ones.

    0
  18. 19

    as usual a nice list!
    thanks

    0
  19. 20

    You don’t say that the active tab needs to be clear and obvious. This is what seperates a tabbed navigation from an ordinary horizonal row of buttons/hyperlinks.

    0
  20. 21

    Some of these are not really tabs.

    1

↑ Back to top