Showcase Of Well-Designed Tabbed Navigation

Advertisement

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

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

Screenshot6

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

Screenshot8

WorldCat9
Rounded corners and clean separation.

Screenshot10

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

Screenshot12

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

Screenshot14

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

Screenshot16

Komodo17
A good example of tabs used in a module.

Screenshot18

Inkd19
Good styling and usable because of size and separation.

Screenshot20

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

Screenshot22

Kinder-Aktuell23
Good gradient use and separation.

Screenshot24

FidesVita25
Tabs used with a sub navigation.

Screenshot26

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

Screenshot28

PBwiki29
Simple yet clean tabs.

Screenshot30

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

Screenshot32

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

Screenshot34

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

Screenshot36

Mint37
Tabs used in a very content heavy module

Screenshot38

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

Screenshot40

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

Screenshot42

Tumblon43
Very clean tabs with a border.

Screenshot44

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

Screenshot46

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

Screenshot48

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

Screenshot50

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

Screenshot52

Fontcase53
A clean tab layout in a very nice design.

Screenshot54

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

Screenshot56

Concentric Studio57
A very simple and usable tab navigation.

Screenshot58

Domestika59
A vertical tab layout with coloring.

Screenshot60

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

Screenshot62

Ready Made63
A well-styled tabbed navigation.

Screenshot64

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

Screenshot66

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

Screenshot68

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

Screenshot70

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

Screenshot72

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

Screenshot74

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

Screenshot76

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

Screenshot78

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

Screenshot80

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

Screenshot82

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

Screenshot84

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

Screenshot86

Space Collective87
Very simple but functional at the same time.

Screenshot88

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

Screenshot90

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

Screenshot92

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

Screenshot94

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

Screenshot96

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

Screenshot98

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

Screenshot100

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

Screenshot102

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

Screenshot104

Footnotes

  1. 1 http://www.geticeberg.com/
  2. 2 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  3. 3 http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
  4. 4 http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  5. 5 http://expressionengine.com/
  6. 6 http://expressionengine.com/
  7. 7 http://www.astratos.com/
  8. 8 http://www.astratos.com/
  9. 9 http://www.worldcat.org/
  10. 10 http://www.worldcat.org/
  11. 11 http://www.veer.com/
  12. 12 http://www.veer.com/
  13. 13 http://365daysofastronomy.org/
  14. 14 http://365daysofastronomy.org/
  15. 15 http://www.wireandtwine.com/
  16. 16 http://www.wireandtwine.com/
  17. 17 http://www.komodomedia.com/
  18. 18 http://www.komodomedia.com/
  19. 19 http://inkd.com/default
  20. 20 http://inkd.com/default
  21. 21 http://jepcoministorage.com/page/warehousing/
  22. 22 http://jepcoministorage.com/page/warehousing/
  23. 23 http://www.kinder-aktuell.de/
  24. 24 http://www.kinder-aktuell.de/
  25. 25 http://www.fidesvita.org/
  26. 26 http://www.fidesvita.org/
  27. 27 http://www.apple.com/trailers/paramount/eagleeye/
  28. 28 http://www.apple.com/trailers/paramount/eagleeye/
  29. 29 http://pbwikimanual.pbwiki.com/
  30. 30 http://pbwikimanual.pbwiki.com/
  31. 31 http://www.fancast.com/
  32. 32 http://www.fancast.com/
  33. 33 http://www.yourchurch.com/sermons/sunday-message/
  34. 34 http://www.yourchurch.com/sermons/sunday-message/
  35. 35 http://onebuttonmouse.com/icons/
  36. 36 http://onebuttonmouse.com/icons/
  37. 37 http://www.designologue.com/mint/
  38. 38 http://www.designologue.com/mint/
  39. 39 http://www.districtsolutions.co.uk/candidates/
  40. 40 http://www.districtsolutions.co.uk/candidates/
  41. 41 https://www.23andme.com/
  42. 42 https://www.23andme.com/
  43. 43 http://tumblon.com/
  44. 44 http://tumblon.com/
  45. 45 http://www.studio7designs.com/portfolio/
  46. 46 http://www.studio7designs.com/portfolio/
  47. 47 http://www.wwd.com/
  48. 48 http://www.wwd.com/
  49. 49 http://www.ministryofsound.com/
  50. 50 http://www.ministryofsound.com/
  51. 51 http://www.disambiguity.com/designbycommunity/
  52. 52 http://www.disambiguity.com/designbycommunity/
  53. 53 http://www.bohemiancoding.com/fontcase/index.html
  54. 54 http://www.bohemiancoding.com/fontcase/index.html
  55. 55 http://www.mixx.com/business
  56. 56 http://www.mixx.com/business
  57. 57 http://concentric-studio.com/work/
  58. 58 http://concentric-studio.com/work/
  59. 59 http://domestika.org/coolsites
  60. 60 http://domestika.org/coolsites
  61. 61 http://www.crowdspring.com/
  62. 62 http://www.crowdspring.com/
  63. 63 http://www.readymade.com/
  64. 64 http://www.readymade.com/
  65. 65 http://themindsetgame.com/
  66. 66 http://themindsetgame.com/
  67. 67 http://nclud.com/
  68. 68 http://nclud.com/
  69. 69 http://invoicemachine.com/home
  70. 70 http://invoicemachine.com/home
  71. 71 http://www.freeagentcentral.com/
  72. 72 http://www.freeagentcentral.com/
  73. 73 http://www.webnotes.net/
  74. 74 http://www.webnotes.net/
  75. 75 http://www.be-a-magpie.com/
  76. 76 http://www.be-a-magpie.com/
  77. 77 http://twodecember.com/en/products/
  78. 78 http://twodecember.com/en/products/
  79. 79 http://www.lanbruk.com.au/
  80. 80 http://www.lanbruk.com.au/
  81. 81 http://www.littlelines.com/
  82. 82 http://www.littlelines.com/
  83. 83 http://www.thuiven.com/
  84. 84 http://www.thuiven.com/
  85. 85 http://www.headscape.co.uk/
  86. 86 http://www.headscape.co.uk/
  87. 87 http://spacecollective.org/
  88. 88 http://spacecollective.org/
  89. 89 http://jobs.webdesignerwall.com/
  90. 90 http://jobs.webdesignerwall.com/
  91. 91 http://designsensory.com/
  92. 92 http://designsensory.com/
  93. 93 http://www.adfed.org/
  94. 94 http://www.adfed.org/
  95. 95 http://www.os.ca/accueil.php
  96. 96 http://www.os.ca/accueil.php
  97. 97 http://www.typography.com/home/index.php?affiliateID=
  98. 98 http://www.typography.com/home/index.php?affiliateID=
  99. 99 http://www.trackmypeople.com/
  100. 100 http://www.trackmypeople.com/
  101. 101 http://www.revolutiondrivingtuition.co.uk/
  102. 102 http://www.revolutiondrivingtuition.co.uk/
  103. 103 http://mesa.cityofgrace.com/
  104. 104 http://mesa.cityofgrace.com/

↑ Back to topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    very nice!

  2. 2

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

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

    • 3

      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)

  3. 4

    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.

  4. 5

    Russell Heimlich

    April 6, 2009 4:13 pm

    where were the bad tab based navigation examples?

  5. 6

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

  6. 7

    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)

  7. 8

    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.

  8. 9

    Hi all,

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

    Enjoy the post!

  9. 10

    Nice showcase !!

    find more treasure for us :)

    ——-HUKYHOME.COM

  10. 11

    thanks sm for your usefull topic :)

  11. 12

    Really great selection.

  12. 13

    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!

  13. 14

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

  14. 15

    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! ;)

  15. 16

    one word: wow!

  16. 17

    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.

  17. 18

    GREAT Inspiration. Here is a nother amazing Tab: http://www.cocktalis.de/ueber-18/produkte/
    Just klick in the Link and confirm the age selector and look on the top of the page. On Mouse over and click you will see the amazing Tabeffect.

  18. 19

    as usual a nice list!
    thanks

  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.

  20. 21

    Some of these are not really tabs.

  21. 22

    awesome.. love the way they have design the depth, look & feel!!

  22. 23

    Perhaps you could add this example too:
    http://brainjoys.de/ueber_brainjoys

    The Tabcontainer there is something, i’ve never seen on any website before.

  23. 24

    good tabation :P

  24. 25

    disambiguity use a woothemes free theme for WordPress!

  25. 26

    really great

  26. 27

    very nice and useful article,

    I appreciate.

  27. 28

    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?!

  28. 29

    Some interesting takes on the idea, I often use tabbed navigation – it’s a great way to navigate a site.

  29. 30

    What’s incredibly important to me as a designer/UI developer is being aware of the code used to make a certain effect possible. Saying “this design has a nice gradient” means absolutely NOTHING unless I know how it’s done. At some point you have to make a decision about whether the graphic effect warrants the extra messing about in development.

    I would be VERY interested to see which of these tabbed navigations used semantic markup. Which ones use Libraries like jquery? Which ones use pure CSS (or sliding doors) Which ones degrade nicely on none-javascript browsers? what advantages are there in using one technique over another?

    Maybe that’s too in depth for a post called “showcase”… Maybe just farming a bunch of screenshots and hyperlinks is just a thing that design blogs do for hits?

  30. 31

    To complement this article, I recommend you this Alert Box by Jakob Nielsen: Tabs, Used Right.

    Many of the examples listed on SM article break the guidelines proposed by Nielse, although he may go two far on his guidelines, sometimes.

  31. 32

    I don’t see coda on this list. http://www.panic.com/coda

  32. 33

    I have an unique one, just checkout at, http://www.xelerate.co.cc/

  33. 34

    Some nice examples. But it’s hard to get tabs wrong in my opinion

  34. 35

    some nice examples

  35. 36

    I love the vertical tabs like on District Solutions. Anyone know of a tutorial for adding them on a one column WP theme?

  36. 37

    Some of them are really good.

  37. 38

    Awesome… resource…

  38. 39

    Perhaps you could add this example too:

    http://www.anlieger.net

  39. 40

    Really liked Jepco Storage thanks for the visuals. Big fan of Quality control.

  40. 41

    STUDIO7DESIGNS looks really good too. Sweet post.

    B…G..design

  41. 42

    Nice collection. Tabs are one the hardest things to make unique while keeping usable. I appreciate the examples.

  42. 43

    Check out tabs here too…. Teksource.ca

  43. 44

    Nice article. I recently wrote a blog article about navigation menus and I have included some good examples of mega drop down menus which is the latest trend used by my many sites:
    Navigation menus

  44. 45

    Like this article!

  45. 46

    Nice subject !!!
    Tabs are one the hardest things to make unique while keeping usable
    Link [www.samacreation.com]

  46. 47

    Nice article.

    Revolution Drviving is a prime example of “Just because I can doesn’t mean I should”. What on earth does a load of cardboard have in common with a driving lesson? Is the car in such a state of disrepair it is being held on with glue and sticky back plastic?

    Grunge has a place and driving lessons is most certainly not it!

  47. 48

    A fine collection, but next time find some bad examples to! To let your visitors see how they shouldn’t do it…

    keep on the good work!

  48. 49

    By well designed, I take it you mean ‘nice’. Some of these example are highly likely to be overlooked by people visiting the respective sites.

  49. 50
  50. 51

    I submit the following for consideration…
    http://www.manmademusic.com/

  51. 52

    Raj Kumar Maharjan

    April 9, 2009 9:30 pm

    NIce Tab menu collection. Impressive way to show out the tab layout

  52. 53

    OPTIsend Print has also a nice tabbed menu.

    You should check it out

  53. 54

    really good influences for me

  54. 55

    Hi! Thanks for the nice article.

    Just one more question about tabs: What if I have to or want to show more sections on my tab navigation than the page’s width allows for? Does anyone know a good pattern for this?

    I know some solutions for this, but am not sure which is really good:
    – showing several rows of tabs (like the old amazon)… which looks really ugly
    – showing arrows to move the tabs (like for the spreadsheet-tabs in Excel or for the browser tabs in Firefox)
    – showing only as many tabs as fit in the row and offer further tabs in something like a dropdown menu

    What do you think about this? Any other ideas, recommendations or tips for good examples?

  55. 56

    Abhijeet Chavan

    April 16, 2009 4:36 am

    Amazing collection, very good inspiration spot :)

  56. 57

    Nice, but how could you possibly even acknowledge the existence of a digital whorehouse like crowdspring. Sites like this should be burned to the ground.

  57. 58

    I liked this article. Although it would have been nice to have a list of the bad examples.

    Do the authors on SM get paid to write these things? If not they need be given a lot more credit. Think about how long it must take to exhaustively search the web for examples. Think of all the boring/useless examples that the author probably stumbled across that he chose NOT to use. Probably a lot.

    Finding different websites, arranging the graphics, thinking of meaningful things to say. That must be a lot of work, putting all this together… that must really suck

  58. 59

    @johnny cage (#57) – Web Notes (listed above) whole website was designed spec, over at 99d. Their user # 248466, if you want to check it for yourself.

  59. 60

    Very nice collection you have compiled. This post has shown me tabs arn’t limited to minimal websites with a ‘clean’ look.
    After looking through this post I am inspired to try and code some similar examples, purely as a technical exercise.

  60. 61

    Carl - Web Courses Bangkok

    September 29, 2009 1:17 am

    This post was really useful for a project I am working on . Just sent a lot of the examples over to the designer. Thanks again!

  61. 62

    Very nice …very useful for new designers….thanks :)

  62. 63

    I like the inkd design showcased in this blog. Can anyone please point me to any tutorial which will deal with such kind of design and coding in php? Thanks in advance.

  63. 64

    Shame you missed out on winris.com. Their tabbed navigation is mint.

  64. 65

    Very useful resource, thanks! Will use it for inspiration on my Genetic testing website, when I get the time.

↑ Back to top