Smashing Magazine - we smash you with the information that will make your life easier. really.
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.
- 97 Comments
- 1
- 2
February 4th, 2009 4:03 pmIf that is Dan Wolgers’ web site, then who is that “Eric Johansson” of the title bar and contact pages? Dude..
- 3
February 4th, 2009 4:14 pmCongratulations 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! :) - 4
February 4th, 2009 4:15 pmThanks for including my site! While browsing for some inspiration, I was pleasantly surprised to find it here amongst some really great sites.
- 5
February 4th, 2009 4:18 pmNice 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.
- 6
February 4th, 2009 4:29 pmThanks 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.
- 7
February 4th, 2009 4:33 pmThese are some great finds, thank you for taking the time to share these with everyone.
- 8
February 4th, 2009 4:50 pmWow, very much appreciate. This will takes days to try it. Valuable links. Thank You.
- 9
February 4th, 2009 4:58 pmGreat list! Thanks guys.
- 10
February 4th, 2009 5:18 pmGreat article. Inspiration and nice collection.
- 11
February 4th, 2009 6:05 pmAwesome and extensive collection! Great work Matt. These are really inspirational.
- 12
February 4th, 2009 6:08 pmVery nice! Great to see some Flash sites too. :)
- 13
February 4th, 2009 6:14 pmThanks You.~
- 14
February 4th, 2009 6:15 pmGreat list, although some of them seem pretty standard…
- 15
February 4th, 2009 7:06 pmWhat a great resource! And I was really surprised to find one (smallstone) very similar to the banner in my blog – katiepalm.squarespace.com. Now I wish I could figure out how to make the knobs work on mine!
- 16
February 4th, 2009 7:35 pmGood post!
- 17
February 4th, 2009 7:42 pmThe 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.
- 18
February 4th, 2009 7:57 pmThat smallstone.com menu is pretty sweet
- 19
- 20
February 4th, 2009 9:26 pmSome 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!
- 21
February 4th, 2009 10:38 pmLoads of information will take some time to digest them all
Great post - 22
February 4th, 2009 11:35 pmReally nice list! :) Good job!
- 23
February 5th, 2009 12:56 amAlthough 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.
- 24
February 5th, 2009 1:07 amExcellent 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 => http://www.effi10.com
On the other hand, I hate Flash… Not accessible, not SEO friendly, and limits user experience to an unique way…
- 25
February 5th, 2009 1:39 amgreat ideas…. I am planning to use one of these in my new project.
- 26
February 5th, 2009 2:03 amVery good collections. Thank you.
- 27
February 5th, 2009 2:10 amHey 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…”
Cheers
- 28
February 5th, 2009 2:16 amVery 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
- 29
February 5th, 2009 2:27 amThat would be “Portuguese”. Nice post!
- 30
February 5th, 2009 2:39 amSimilar to the Porsche Canada menu, take a look at the brilliant one on http://www.kawasaki.com
- 31
February 5th, 2009 3:58 amThese 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.”
- 32
February 5th, 2009 4:26 amTwo comments:
1. Highly Usable Navigation – Taptap is awful.
2. Why no deep navigation examples, sites which have multiple levels and 100s of pages? - 33
February 5th, 2009 4:28 amSome really awesome navigations. Thanks for sharing.
- 34
February 5th, 2009 4:35 amNice. I really like this article. Thank you!
- 35
February 5th, 2009 4:50 amSo much diversity in designs and approaches! Some people are fantastic in thinking outside the square…
- 36
February 5th, 2009 4:59 amThe 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.
- 37
February 5th, 2009 4:59 amNice but not necessarily userfriendly. I just tried a random one (acko.net) and the navigation doesn’t work in IE. In FF it’s o.k.
- 38

- 39
February 5th, 2009 6:27 amWow, lots of inspiration here!
- 40
February 5th, 2009 6:50 amThis 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)…
- 41
February 5th, 2009 6:57 amSome great examples there.
I made a Flash based header/menu recently. It’s not on par with some of those above but I’m happy enough with it :) : http://www.move2lux.com - 42
February 5th, 2009 8:14 amThanks for this post. Really creative and inspiring navigation menus, though I would also agree that they are not all user-friendly.
- 43
February 5th, 2009 8:15 amGreat inspiration, thanks so much again!
- 44
February 5th, 2009 8:31 amHow many times is SM going to use Alex Buga, Loodo, Acko.net, TNVacation, Jeff Sarmiento, etc. as examples… Every other day you title the post something different and dissect their sites. It’s flat out boring, and truly not that informative at all.
- 45
February 5th, 2009 9:01 amGorgeous selection ! Thanx a lot.
- 46
February 5th, 2009 9:36 amNice inspiration, but… The vast majority of these fail on cross-browser compatibility and completely miss the mark on progressive enhancement. Javascript is an enhancement to CSS and HTML. Just as CSS is an enhancement to HTML. I would like to see a collection that showcases functionality in IE6 with javascript off and only gets cooler as you move up towards Firefox or Safari. Meaning sites that actually work in all environments.
- 47
February 5th, 2009 9:43 amyou people have some of the worst fucking taste on the internet.
- 48
February 5th, 2009 9:57 amsome nice selections, some not so hot
- 49
February 5th, 2009 9:57 amreally nice article dude, congratz.
i always read smashing magazine but this time you rock!
- 50
February 5th, 2009 10:03 amI’ll just echo the thoughts of what appear to be the minority here (but I’d suggest the better-informed) … These are all very beautiful but of the 3 I tried (the first three, in fact), none of them were usuable. It’s not obvious that they are navigation at all. First rule of navigation menus is being able to find them.
- 51
February 5th, 2009 10:41 amUh. It’s RE-201, not SE-201. Not that anyone cares… ho hum.
- 52
February 5th, 2009 11:25 amCan some of these be used with Wordpress?
- 53
February 5th, 2009 12:13 pmThis is a great list. It’s very extensive, and I’m sure will provide a lot of design inspiration in the future. However, I do not think that it lives up to its “User-Friendly” title – the vast majority of these are clearly not designed with usability as the primary focus.
- 54
February 5th, 2009 12:18 pmThese mashups are much more useful when they link to examples of how you too can achieve these effects. Here are two (one of them is a shameless plug for my blog) off the top of my head: Dragon Interactive hover fade and CODA popup bubble.
- 55
February 5th, 2009 12:35 pmAnd another nice CSS-Navigation from a german website: http://www.liberty-homes.de
- 56
February 5th, 2009 12:58 pmThanks Matt for the shout out!
- 57
February 5th, 2009 1:07 pmReally great job smash magazine i like that “Designsensory” Menu it has perfect web design too .
- 58
February 5th, 2009 1:29 pmHi, Matt. just a note: Nando (of Nando Designer) is not portuguese, he’s brazilian, from Rio de Janeiro.
cheers!
Rui
- 59
February 5th, 2009 2:38 pmI agree with boredreader #39 we have seen most of these sites in previous posts. I guess it’s OK to dissect these sites but hopefully we can look forward to some new content here on SM and not simply re-posts with different titles.
- 60
February 5th, 2009 2:59 pmI might mention that my site (included in this list) does actually validate as XHTML 1.0 strict, and gracefully degrades as well. I just wanted to prove that some JS-dependent navigation can actually remain useful if JS is disabled, and to dismiss any navigation that uses JS is perhaps a bit short sighted.
Whether or not it is ‘user friendly’ is perhaps up to the individual user. I find it to be friendly and interesting, but that’s just me.
- 61
February 5th, 2009 8:20 pmThanks for the compilation =) Seems hover menus and tabs are pretty common
- 62
February 5th, 2009 8:29 pm50 Beautiful
And User-FriendlyNavigation Menus.But thanks :)
- 63
February 5th, 2009 11:41 pmamazing! Thx!
- 64
February 5th, 2009 11:58 pm@Euge I worked on the navigation featured from Tutorial9.net and UXBooth.com, and can confirm that both these sites are WordPress blogs. Takes a bit of understanding to get things to work nicely though =/
- 65
February 6th, 2009 6:24 amNice collection here to revisit from time to time.
- 66
February 6th, 2009 8:35 amnice one really! :D
- 67
- 68
February 6th, 2009 10:03 amThe fact that there are “highly usable” and “user-friendly” categories shows how ridiculous the others are. The menu is unimportant. The content should drive navigation and be the focus of your site. It’s like Vista vs. Mac OS X. The UI shouldn’t be the focus.
- 69
February 6th, 2009 12:17 pmThat’s an awesome compiled list of navigation! Not only that the sites sport an intuitive and visitor-friendly navigation menu, they have great designs that inspire. These websites have more than just menus to offer – thanks for sharing! Woonky.ideas is one of the brightest one so far, not to mention the ones from Studioracket and Fubiz :)
- 70
February 6th, 2009 1:56 pmThe whitehouse.gov menu doesn’t use javascript actually accept for maybe the transparency. it’s all css for the hover and column like menu item list
- 71
February 6th, 2009 5:32 pmAdidas.com – beautiful but not user friendly ..
- 72
February 7th, 2009 3:36 amA very nice CSS/Java menu I’ve found at http://www.nextframe.ro . You might want to include this too.
- 73
February 7th, 2009 10:32 amMany great ideas. Thank you.
- 74
February 7th, 2009 2:16 pmThis is a great list of sites, i will be sure to come backt o it for inspiration.
As for user friendly, not so much, especially the flash layouts. - 75
February 7th, 2009 4:52 pmMatt, thanks for adding my website nopokographics in your list.
Great job guy!
Keep going! - 76
February 9th, 2009 4:32 amSome very nice examples.
- 77
February 9th, 2009 6:32 amThanks very much for the nice list, you guys always showcase things that are truly inspiring and fresh! Thanks!
- 78
February 10th, 2009 1:09 amThx a dozen for the apprecation – SM ftw!
- 79
February 11th, 2009 6:34 amWow great collection and thanks for the list.
- 80
February 11th, 2009 6:47 pmReal nice article! There are some great innovative ideas included in this post!
- 81
February 12th, 2009 1:56 amI built AppStorm and I want to say thank you for including it in this awesome list, but just thought it might be important to note that the jQuery used for the menu is to add a class to the current top level category so it stays active when hovering over the subnav. It really isn’t a full blown jQuery menu, just a couple lines of code are used to achieve the effect. The CSS is really the one that is doing the heavy lifting here. And by the way, great roundup. There are a lot of really nice navigation out there.
- 82
February 12th, 2009 2:08 amThanks a lot for sharing, keep it up!
- 83
February 14th, 2009 3:50 pmcool! thanks
- 84
March 4th, 2009 5:30 pmThese are all super inspiring. I think I come to this website almost once a day to check on new and great information. I just created a very cool blog that I am super proud of. It has a ticker that sends info to readers and it has links at the top as well as side links that move with you as you navigate the blog. It also has a music player that we installed that organizes all of the music on the page. I know you said no link dropping but I am just really proud of the navigation part of my blog and would love to show you and your readers. Cheers.
- 85
March 5th, 2009 7:33 pmMany thanks!
- 86
March 16th, 2009 6:31 pmNick Tones sounds much cooler but it’s Nick Jones. Thanks so much for including me though!
- 87
March 26th, 2009 2:39 amthis is amasing! i am really impressed by the variety of menues. thank you
- 88
April 6th, 2009 4:21 amawesome list
Thnks guys.
- 89
April 6th, 2009 8:54 pmvery nice post.. But i feel NickAd is not user friendly..
- 90
April 23rd, 2009 8:44 amCan Nick Tones’ be made in CSS as well? Any idea or other examples?
- 91
April 24th, 2009 12:51 amSome really pretty example in there, which are great to look at and showcase the talents of the designers that came up with them.
But…..as other people have said, many are distinctly user unfriendly. Visitors to your site shouldn’t have to think about how to navigate it – it should be intuitive. Sure, this might make for some slightly less pretty nav solutions (although there’s still a lot of scope IMO) but it’s much more important for users to be able to navigate your site than to sit there thinking, “wow, pretty. Now how do I get about”.
That said, there are certainly some examples in this list that look good, and enhance the user experience.
- 92
May 13th, 2009 7:06 amSome of these examples are nice….. yet…. a lot of these examples are pretty horrible. Looking at the mac slide bar… I hate using that thing. When the browser loads the page the control does not respond immediately. There are other things in this list that are pretty bad too like the small stone example… hey, here is an idea…. make users hunt around for things they need… why not just hide the links all together and they just have to click and guess where they want to go and really waste their time… yeah, that’s the ticket. :/
- 93

- 94
September 23rd, 2009 10:33 amVery good collection
- 95
October 15th, 2009 6:47 amGreat article. And of course there is the easy way to create flash menus using FMF: http://www.flashmenufactory.com/
- 96
January 4th, 2010 7:56 amI love macrabbit’s menu!
- 97
January 5th, 2010 11:00 amWhere in the world can you learn to make these masterpieces?? Books, articles, tutorials? Anyone?!!!
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- We’re Ready for CSS3, but are we Ready for CSS3? - http://bit.ly/cKN7Bz
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
- How to Drastically Improve Your Designs - http://bit.ly/a9L1sb
- A Quick Look at Mobile Web Designs - http://bit.ly/9TCWCG
- How to Test your JavaScript Code with QUnit - http://bit.ly/da853c












































































(4 votes, average: 4.25 out of 5)
Some very inspiring examples here, particularly the listed items on Ruby Tuesdays!