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 New York, dedicated to smart front-end techniques and design patterns.

50 Beautiful And User-Friendly Navigation Menus


Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.

Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

Please also consider our previous articles:

1. CSS-Based Navigation Menus Link

A colorful menu that adds to the feel of the website.


Steven Wittens takes a look at the navigation menu from a quite unusual perspective.


Web Design Ledger7
Web Design Ledger has an excellent menu; its large size is convenient but doesn’t intrude on the content.


UX Booth9
UX Booth uses a a stylish text box under the navigation as a sort of subtext for each menu item.


Vertical navigation menus are used very rarely, for the simple reason: they are harder to use. However, some designers risk unusual approaches. Nopoko Graphics uses an arrow and a hover-effect for its vertical navigation menu.


Icon Designer13
This website uses a large image-based menu on the home page. The user’s attention is drawn directly to this large menu, making it convenient for users.


This large and colorful menu is very noticeable and uses a slight hover effect to further define the menu items.


An intuitive drop-down navigation that uses 2 colors effectively to communicate the active navigation item and the passive ones.


Smallstone, a U.S. record label, presents its navigation menu in the form of a the so-called Space Echo Roland SE-201.


It’s pretty hard to find a nice-looking drop-down menu. This one is a beautiful exception.


Clearleft uses a couple of paper pieces for its navigation.


A simple, clean and beautiful navigation with a nice hover effect.


Design Intellection25
An excellent example of block navigation that shows how effectively “speaking” hover effects can be used with a clean and simple navigation menu.


A navigation menu doesn’t have to look like a traditional navigation menu. Ronny Pries uses a floor plan to lead site visitors through the pages of the site.


Jiri Tvrdek29
Jiri Tvrdek presents the navigation options of his site as leaves on a tree. Creative, unusual and memorable.


Water’s Edge Media31
Patricia Abbott uses clothespins for the navigation options.


Matt Dempsey33
Matt Dempsey highlights his navigation options with a brush stroke.


The current navigation option is pressed — clear and intuitive.


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


This website seems to like setting “done”-marks…


Jeff Sarmiento39
Why not try a sloping navigation options once in a while?


A really unusual navigation menu that uses some kind of a mindmap to illustrate the navigation. And, apart from that, the navigation menu is hand-drawn!


Cultured Code43
A subtle yet distinct menu that is out of the way of content. Excellent colors and a nice hover effect also add to the menu.


Nando Designer45
This Portuguese designers uses handwriting and a piece of paper for its main navigation.


Sometimes typography is just enough…


Vivid typography in use.


Some designers integrate a stamp in the contact navigation option.


South Creative51
This website uses large navigation buttons and has a good hover effect.


Mac Rabbit
53One more example of a large and clean menu. This one uses icons to aid the reader in recognizing each item’s function.


This menu has a clean and smooth layout, and it has a great sub-menu that uses transparency to separate it from the main menu.


Icons reinforce the menu items on this website and add emphasis to each option.


Revolution Driving Tuition59
This website has a great grunge style, and the menu fits right into the layout.


Duarte Pires61
This menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.


Valetin Agachi63
This navigation has a rather unique style that emphasizes selected items. Also, the menu layout stays consistent throughout the whole website.


Tutorial9 recently got a nice redesign, which came with a very usable and well-organized menu.


2. CSS Menus With JavaScript Link

Agami Creative67
Designers sometimes use tooltips for their navigation. However, tooltips and aqua are quite an unusual combination.


A perfect example of how one should organize huge amounts of content into clear and easily distinguishable sections. Also, excellent design of the drop-down menu.


AppStorm is a new website by Envato. A jQuery effect is used to create an excellent and very usable drop-down menu.


Eric Johansson73
Eric Johansson, a designer from Sweden, uses tall vertical blocks and images for his navigation.


This conveniently located menu has a beautiful hover effect. The sub-menus are consistent and include every item.


Dragon Interactive77
Dragon Interactive has a colorful jQuery-based menu with a great effect.


I am a big fan of this navigation layout. I like how the menu fits in with the grunge theme. It also uses another jQuery drop-down effect.


For its recent redesign, Abduzeedo introduced a jQuery slider into the navigation.


3. Flash-Based Menus Link

Colorful sloping Flash-based navgation from an Indian Web design agency.


Not Forgotten: The Movie85
Most entertainment websites use Flash and unusual navigation menus to capture users’ attention. On this one, an instant classic, navigation items are put on cards.


Nick Tones87
Nick Tones, with a dynamic, colorful and yet still somehow usable navigation menu.


This Argentinian design agency puts CDs and books on a table, each representing a navigation option, of course. When hovered over with a mouse, each object reveals what can be found inside.


The designers of this Flash-based site came up with something truly original. The navigation menu is put on a ribbon; each navigation item has a nice and simple hover-effect: when an icon is hovered, it is replaced with the site area the icon stands for. Usually tooltips are used for this puprose, here designers use a different approach. Outstanding!


Spectra Visual Newsreader93
A beautiful and very colorful Flash menu that is a good example of excellent usability.


This unique website is all about easy-to-use navigation.


Sensi Soft97
This amazing portfolio has very well-thought out and convenient navigation.


4. Highly Usable Navigation Link

tap tap tap99
This website has a beautiful layout and a menu with great effects.


Apple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.


Alex Buga103
Visitors here use a large and well-laid out slider to move through news items.


The content on the home page of this portfolio website has an extremely simple yet usable organization.


This visually stunning Flash-based portfolio uses an accordion-like layout for the content, so there is no loading of new pages. The large type stresses the importance of menu items.


Colourpixel has a very interesting layout for its portfolio. It combines all of its sections onto a single page, and allows each item to be hidden or revealed, as demanded by the user.


Yet another excellent Flash-based portfolio. This website organizes all gallery items onto an interesting revolving list.


Alexandru Cohaniuc113
This portfolio is rather well known for its beautiful layout. An accordion effect allows users to navigate through projects and portfolio items.


Porsche Canada115
Porsche Canada’s website has very user-friendly navigation, with many sub-items for each menu item. The convenience and usability of this menu is great.


Jeremy Levine Design117
This architecture portfolio has a unique layout that allows users to easily browse the website. The line of menu items has many effects and transitions that make it very convenient.


Firstborn, a well-known design studio, uses scrollable, horizontal navigation for its portfolio. The navigation items can also be displayed in other modes, such as thumbnails, making it even better.


Benjamin David121
This portfolio has a vertical slider that automatically moves through menu items. Many large items are placed together in a single glowing menu.


Thibaud’s Portfolio123
Another stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.


Jason Reed Web Design
Accordions are useful when trying to squeeze many items into a small space. Jason Reed used a stylish accordion in his portfolio to allow users to navigate pages.


Marius Roosendaal125
Another usable accordion menu that groups portfolio items.


5. Vertical Navigation Layouts Link

Danny Blackman127
Danny Blackman’s website is often regarded as one of the better portfolios out there, in part because of the amazing vertical layout.


Tomas Pojeta129
This website is yet another portfolio that uses a vertical layout to incorporate multiple pages onto one, while allowing users to move vertically between sections.


Volll uses a vertical layout with a beautiful illustrated landscape background.


Mediocore is an awesome portfolio. It has a few more elements than usual on its pages, but still looks excellent.


6. User-Friendly Sidebar Menus Link

FreelanceSwitch organizes its articles using a great menu.


The redesign of Fubiz brings an excellent sidebar. Slide effects are used to fit a large amount of content into a small sidebar.


Checkout has a stunning website. An extremely clean list-style menu in the features section also displays nice icons.


Ruby Tuesday141
Ruby Tuesday has a very nice website. The sidebar menu has exceptional icons and smooth hover effects.


Concentric Studio143
A simple and minimalist menu with sliding effects.


Barack Obama145
President Obama’s website has a well-spaced and nicely contrasting list-style sidebar menu.


Another clean and well-spaced list menu.


Further Resources Link

You may be further interested in these articles and related resources:


Footnotes Link

  1. 1 /2007/03/14/css-based-navigation-menus-modern-solutions/
  2. 2 /2008/02/26/navigation-menus-trends-and-examples/
  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
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131 #
  132. 132 #
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139 #
  140. 140 #
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145 #
  146. 146 #
  147. 147 #
  148. 148 #
  149. 149
  150. 150
  151. 151
  152. 152
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 New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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

    Some very inspiring examples here, particularly the listed items on Ruby Tuesdays!

  2. 2

    Thanks for including my site! While browsing for some inspiration, I was pleasantly surprised to find it here amongst some really great sites.

  3. 3

    Chris Sanders

    February 4, 2009 4:33 pm

    These are some great finds, thank you for taking the time to share these with everyone.

  4. 4

    Although the couple of examples you’ve put up may be pretty, I wouldn’t consider any type of vertical text to be user friendly on screen; especially when used as primary navigation for a site.

    All in all, a very inspiring list though.

  5. 5

    If that is Dan Wolgers’ web site, then who is that “Eric Johansson” of the title bar and contact pages? Dude..

  6. 6

    Congratulations Matt! You’ve made a really extensive research! Very inspirational…There are some crazy and creative solutions out there…Somehow the simple ones really stand out in their own way…
    I really like Jayme Blackmon’s done-marks menu…Genius! :)

  7. 7

    Nice Collection Matt…. Thanks for putting all of them together !!
    Now one can fine navigation menus related inspiration in one place ;) Again Thanks for sharing!!

    DKumar M.

  8. 8

    Thanks for the nod to DFW UPA! Navigation was something that I wanted to make sure was quick and easy to understand and follow. Great list – awesome inspiration – proud to be a part of it. Thank you.

  9. 9

    Wow, very much appreciate. This will takes days to try it. Valuable links. Thank You.

  10. 10

    Klaye Morrison

    February 4, 2009 4:58 pm

    Great list! Thanks guys.

  11. 11

    Very nice, mostly :) but there are some that were updated meanwhile and some that I don’t see the point on showing them, but mostly very nice. :D

    Tanx :D

  12. 12

    Curt Simon Harlinghausen

    February 4, 2009 5:18 pm

    Great article. Inspiration and nice collection.

  13. 13

    Awesome and extensive collection! Great work Matt. These are really inspirational.

  14. 14

    Very nice! Great to see some Flash sites too. :)

  15. 15

    Thanks You.~

  16. 16

    Great list, although some of them seem pretty standard…

  17. 17

    What a great resource! And I was really surprised to find one (smallstone) very similar to the banner in my blog – Now I wish I could figure out how to make the knobs work on mine!

  18. 18

    Juliet van Ree

    February 4, 2009 7:35 pm

    Good post!

  19. 19

    The showcase is beautiful but the title is misleading.

    These are “beautiful” navigation menus but not necessarily user-friendly. In fact, most of the entries here are less user-friendly than, say, the navigation of gmail. Also take note that the entries under CSS-based menus are mostly image-menus, not really-CSS-powered. Let’s not argue about CSS sprites, etc. The fact remains that they’re wow-factor is based on the use of metaphor/imagery and not really color contrast and typography (using CSS).

    The CSS-based menus that aren’t image-intensive but manage to be user-friendly may be Gabbo Design, Concentric Studio, Medio Core (which looks a lot like smashingmagazine’s menu, by the way).

    I’m not bashing the post, I agree that they’re all beautiful and yes, you can manage to have beautiful AND user-friendly navigation menus, but this showcase is more of a beautiful navigation showcase.

  20. 20

    Brian Gottier

    February 4, 2009 7:57 pm

    That menu is pretty sweet

  21. 21

    Nice but not necessarily userfriendly. I just tried a random one ( and the navigation doesn’t work in IE. In FF it’s o.k.

  22. 22

    Nice stuff. Useful but looks too jazzy could be nice if there are more professional works are included. Most of the above mentioned sites comes under the personal portfolio categories.

  23. 23

    Some really nice finds! Alexcohaniuc, Studioracket, Nickad, Colourpixel, they’re quite creative! But like Mary, user-friendliness is a debatable issue, but I guess ultimately it will depend on the target audience to whom the site caters to!

  24. 24

    Loads of information will take some time to digest them all
    Great post

  25. 25

    Really nice list! :) Good job!

  26. 26

    Cédric GIRARD

    February 5, 2009 1:07 am

    Excellent selection, it’s a good base for inspiration ;-)

    To my mind, CSS bases menus are a very good solution, improoving design, accessibility and SEO capacity (used with negative text indents…) ; I use it litteraly for all my websites.

    Example here =>

    On the other hand, I hate Flash… Not accessible, not SEO friendly, and limits user experience to an unique way…

  27. 27

    great ideas…. I am planning to use one of these in my new project.

  28. 28

    Very good collections. Thank you.

  29. 29

    Hey guys,

    Luke from Bonfire here – thanks for the link. However the image associated to our work is actually wrong, it is somebody else’s menu!

    “Bonfiremedia. Sometimes typography is just enough…”


  30. 30

    That would be “Portuguese”. Nice post!

  31. 31

    Similar to the Porsche Canada menu, take a look at the brilliant one on

  32. 32

    These are “beautiful” navigation menus but not necessarily user-friendly.

    My thoughts exactly. To put it in the words of Don Norman: “Some of these navigations probably won a prize.”

  33. 33

    Darren Taylor

    February 5, 2009 4:26 am

    Two comments:

    1. Highly Usable Navigation – Taptap is awful.
    2. Why no deep navigation examples, sites which have multiple levels and 100s of pages?

  34. 34

    Some really awesome navigations. Thanks for sharing.

  35. 35

    Nice. I really like this article. Thank you!

  36. 36

    Craig - Abrishca Digital Media

    February 5, 2009 4:50 am

    So much diversity in designs and approaches! Some people are fantastic in thinking outside the square…

  37. 37

    The title of this article is wrong… Most of the examples in the article aren’t user-friendly at all. They’re beautifull and very creative, but not user-friendly.

  38. 38

    Really nice!!

    This one is an old label menu, good too

    Avance Import

  39. 39

    Wow, lots of inspiration here!

  40. 40

    This is a better example than most on Smashing Magazine. Too often on this website, the “top ten best…” websites are all the homepages of web designers. Of course, this post has a lot of that too. But this post also has real world examples like restaurants and such. I hope the editors of Smashing Magazine encourage the blog writers to use more useful, real world examples… (because often our most cherished CSS experts have stopped making websites and make all their money by giving lectures at Web Standards conferences… and as smart as they are, they cease being good examples to follow when they stop working as web designers)…


↑ Back to top