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.


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

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


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


Rounded corners and clean separation.


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


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


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


A good example of tabs used in a module.


Good styling and usable because of size and separation.


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


Good gradient use and separation.


Tabs used with a sub navigation.


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


Simple yet clean tabs.


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


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


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


Tabs used in a very content heavy module


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


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


Very clean tabs with a border.


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


A simple yet usable tab system with a sub navigation.


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


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


A clean tab layout in a very nice design.


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


Concentric Studio57
A very simple and usable tab navigation.


A vertical tab layout with coloring.


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


Ready Made63
A well-styled tabbed navigation.


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


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


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


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


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


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


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


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


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.


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


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


Space Collective87
Very simple but functional at the same time.


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


Very basic styling with strong colors and a sub navigation.


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


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


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


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


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


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



  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104

↑ Back to top Tweet itShare on Facebook

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

    Raj Kumar Maharjan

    April 9, 2009 9:30 pm

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

  2. 52

    OPTIsend Print has also a nice tabbed menu.

    You should check it out

  3. 103

    really good influences for me

  4. 154

    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?

  5. 205

    Abhijeet Chavan

    April 16, 2009 4:36 am

    Amazing collection, very good inspiration spot :)

  6. 256

    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.

  7. 307

    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

  8. 358

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

  9. 409

    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.

  10. 460

    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!

  11. 511

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

  12. 562

    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.

  13. 613

    Shame you missed out on Their tabbed navigation is mint.

  14. 664

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


↑ Back to top