Smashing Magazine - we smash you with the information that will make your life easier. really.

50 Beautiful And User-Friendly Navigation Menus

Advertisement

By Matt Cronin

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:

[Offtopic: by the way, do you know the Smashing Network has its own Smashing Network RSS Feed? Only excerpts are displayed in the feed.]

1. CSS-Based Navigation Menus

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

Loodo in 50 Beautiful And User-Friendly Navigation Menus

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

Persp in 50 Beautiful And User-Friendly Navigation Menus

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

Wdledger in 50 Beautiful And User-Friendly Navigation Menus

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

Ux in 50 Beautiful And User-Friendly Navigation Menus

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

Nopoko in 50 Beautiful And User-Friendly Navigation Menus

Icon Designer
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.

Icondesigner in 50 Beautiful And User-Friendly Navigation Menus

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

Cosmicsoda in 50 Beautiful And User-Friendly Navigation Menus

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

Sensory in 50 Beautiful And User-Friendly Navigation Menus

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

Small in 50 Beautiful And User-Friendly Navigation Menus

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

Ten in 50 Beautiful And User-Friendly Navigation Menus

Clearleft
Clearleft uses a couple of paper pieces for its navigation.

Left in 50 Beautiful And User-Friendly Navigation Menus

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

Blue in 50 Beautiful And User-Friendly Navigation Menus

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

Di in 50 Beautiful And User-Friendly Navigation Menus

Ronnypries.de
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.

Map in 50 Beautiful And User-Friendly Navigation Menus

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

Jiri in 50 Beautiful And User-Friendly Navigation Menus

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

Tap in 50 Beautiful And User-Friendly Navigation Menus

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

Aqua in 50 Beautiful And User-Friendly Navigation Menus

Cognigen
The current navigation option is pressed — clear and intuitive.

Curr in 50 Beautiful And User-Friendly Navigation Menus

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

Vert in 50 Beautiful And User-Friendly Navigation Menus

Jayme Blackmon
Jayme Blackmon seems to like setting “done”-marks…

Jayme in 50 Beautiful And User-Friendly Navigation Menus

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

Workmenu in 50 Beautiful And User-Friendly Navigation Menus

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

Rack in 50 Beautiful And User-Friendly Navigation Menus

Cultured Code
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.

Culturedcodenav in 50 Beautiful And User-Friendly Navigation Menus

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

Paper in 50 Beautiful And User-Friendly Navigation Menus

Bonfiremedia
Sometimes typography is just enough…

Ashvegas in 50 Beautiful And User-Friendly Navigation Menus

Artgeex
Vivid typography in use.

Artgeex in 50 Beautiful And User-Friendly Navigation Menus

Gloobs
Some designers integrate a stamp in the contact navigation option.

Orig in 50 Beautiful And User-Friendly Navigation Menus

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

Southcreativenav in 50 Beautiful And User-Friendly Navigation Menus

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

Macrabbitnav in 50 Beautiful And User-Friendly Navigation Menus

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

Rapid in 50 Beautiful And User-Friendly Navigation Menus

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

Dfwupa in 50 Beautiful And User-Friendly Navigation Menus

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

Revolutiondriving in 50 Beautiful And User-Friendly Navigation Menus

Duarte Pires
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.

Duartepires in 50 Beautiful And User-Friendly Navigation Menus

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

Valentin in 50 Beautiful And User-Friendly Navigation Menus

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

Tutorial9 in 50 Beautiful And User-Friendly Navigation Menus

2. CSS Menus With JavaScript

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

Com in 50 Beautiful And User-Friendly Navigation Menus

Whitehouse.gov
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.

Large in 50 Beautiful And User-Friendly Navigation Menus

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

Appstorm in 50 Beautiful And User-Friendly Navigation Menus

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

Big in 50 Beautiful And User-Friendly Navigation Menus

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

Codanav in 50 Beautiful And User-Friendly Navigation Menus

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

Dragoninteractive in 50 Beautiful And User-Friendly Navigation Menus

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

Bern in 50 Beautiful And User-Friendly Navigation Menus

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

Abduzeedonav in 50 Beautiful And User-Friendly Navigation Menus

3. Flash-Based Menus

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

Ph in 50 Beautiful And User-Friendly Navigation Menus

Not Forgotten: The Movie
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.

Nf in 50 Beautiful And User-Friendly Navigation Menus

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

Motion in 50 Beautiful And User-Friendly Navigation Menus

woonky.ideas
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.

Woo in 50 Beautiful And User-Friendly Navigation Menus

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

Mena in 50 Beautiful And User-Friendly Navigation Menus

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

Spectra in 50 Beautiful And User-Friendly Navigation Menus

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

Nickad in 50 Beautiful And User-Friendly Navigation Menus

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

Sensisoft in 50 Beautiful And User-Friendly Navigation Menus

4. Highly Usable Navigation

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

Taptaptapnav in 50 Beautiful And User-Friendly Navigation Menus

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

Macmenu in 50 Beautiful And User-Friendly Navigation Menus

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

Alexabuganav in 50 Beautiful And User-Friendly Navigation Menus

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

Creasensonav in 50 Beautiful And User-Friendly Navigation Menus

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

Polargold in 50 Beautiful And User-Friendly Navigation Menus

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

Colourpixelnav in 50 Beautiful And User-Friendly Navigation Menus

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

Dveinnav in 50 Beautiful And User-Friendly Navigation Menus

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

Alexandrunav in 50 Beautiful And User-Friendly Navigation Menus

Porsche Canada
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.

Porschenav in 50 Beautiful And User-Friendly Navigation Menus

Jeremy Levine Design
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.

Jeremylevine in 50 Beautiful And User-Friendly Navigation Menus

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

Firstbornfolionav in 50 Beautiful And User-Friendly Navigation Menus

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

Benjamindavid in 50 Beautiful And User-Friendly Navigation Menus

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

Thibaud in 50 Beautiful And User-Friendly Navigation Menus

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.

Jasonreed in 50 Beautiful And User-Friendly Navigation Menus

Marius Roosendaal
Another usable accordion menu that groups portfolio items.

Marius in 50 Beautiful And User-Friendly Navigation Menus

5. Vertical Navigation Layouts

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

Danny in 50 Beautiful And User-Friendly Navigation Menus

Tomas Pojeta
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.

Tomaspojetanav in 50 Beautiful And User-Friendly Navigation Menus

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

Volllnav in 50 Beautiful And User-Friendly Navigation Menus

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

Mediocore in 50 Beautiful And User-Friendly Navigation Menus

6. User-Friendly Sidebar Menus

FreelanceSwitch
FreelanceSwitch organizes its articles using a great menu.

Freelanceswitchnav in 50 Beautiful And User-Friendly Navigation Menus

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

Fubiznav in 50 Beautiful And User-Friendly Navigation Menus

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

Checkoutnav in 50 Beautiful And User-Friendly Navigation Menus

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

Rubytuesday in 50 Beautiful And User-Friendly Navigation Menus

Concentric Studio
A simple and minimalist menu with sliding effects.

Concentric in 50 Beautiful And User-Friendly Navigation Menus

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

Obama in 50 Beautiful And User-Friendly Navigation Menus

GABBO DESIGN
Another clean and well-spaced list menu.

Gabbo in 50 Beautiful And User-Friendly Navigation Menus

Further Resources

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

(al)

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.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4.25 out of 5)
Loading ... Loading ...

Tags: ,

Advertising
  1. 1
    Jordan Moore
    February 4th, 2009 4:00 pm

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

  2. 2
    Buffface
    February 4th, 2009 4:03 pm

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

  3. 3
    OnWebDev
    February 4th, 2009 4:14 pm

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

  4. 4
    Jason Reed
    February 4th, 2009 4:15 pm

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

  5. 5
    DKumar M.
    February 4th, 2009 4:18 pm

    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.

  6. 6
    Ryan Plesko
    February 4th, 2009 4:29 pm

    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.

  7. 7
    Chris Sanders
    February 4th, 2009 4:33 pm

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

  8. 8
    chiefwakambi
    February 4th, 2009 4:50 pm

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

  9. 9
    Klaye Morrison
    February 4th, 2009 4:58 pm

    Great list! Thanks guys.

  10. 10
    Curt Simon Harlinghausen
    February 4th, 2009 5:18 pm

    Great article. Inspiration and nice collection.

  11. 11
    Sneh
    February 4th, 2009 6:05 pm

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

  12. 12
    Ben
    February 4th, 2009 6:08 pm

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

  13. 13
    jojobaoil
    February 4th, 2009 6:14 pm

    Thanks You.~

  14. 14
    Austin
    February 4th, 2009 6:15 pm

    Great list, although some of them seem pretty standard…

  15. 15
    katie
    February 4th, 2009 7:06 pm

    What 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. 16
    Juliet van Ree
    February 4th, 2009 7:35 pm

    Good post!

  17. 17
    mary
    February 4th, 2009 7:42 pm

    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.

  18. 18
    Brian Gottier
    February 4th, 2009 7:57 pm

    That smallstone.com menu is pretty sweet

  19. 19
    deepakd
    February 4th, 2009 9:13 pm

    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.

  20. 20
    Musings
    February 4th, 2009 9:26 pm

    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!

  21. 21
    gaurav
    February 4th, 2009 10:38 pm

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

  22. 22
    Creamy CSS
    February 4th, 2009 11:35 pm

    Really nice list! :) Good job!

  23. 23
    Pete
    February 5th, 2009 12:56 am

    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.

  24. 24
    Cédric GIRARD
    February 5th, 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 => 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. 25
    emi
    February 5th, 2009 1:39 am

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

  26. 26
    sekhar
    February 5th, 2009 2:03 am

    Very good collections. Thank you.

  27. 27
    Luke Walding
    February 5th, 2009 2:10 am

    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…”

    Cheers

  28. 28
    Mo
    February 5th, 2009 2:16 am

    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

  29. 29
    M.
    February 5th, 2009 2:27 am

    That would be “Portuguese”. Nice post!

  30. 30
    Martin
    February 5th, 2009 2:39 am

    Similar to the Porsche Canada menu, take a look at the brilliant one on http://www.kawasaki.com

  31. 31
    Fred
    February 5th, 2009 3:58 am

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

  32. 32
    Darren Taylor
    February 5th, 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?

  33. 33
    Ben
    February 5th, 2009 4:28 am

    Some really awesome navigations. Thanks for sharing.

  34. 34
    ArtBox7.com
    February 5th, 2009 4:35 am

    Nice. I really like this article. Thank you!

  35. 35
    Craig - Abrishca Digital Media
    February 5th, 2009 4:50 am

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

  36. 36
    Jonas
    February 5th, 2009 4:59 am

    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.

  37. 37
    Anne
    February 5th, 2009 4:59 am

    Nice 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. 38
    Jorge
    February 5th, 2009 5:00 am

    Really nice!!

    This one is an old label menu, good too

    Avance Import

  39. 39
    Sean
    February 5th, 2009 6:27 am

    Wow, lots of inspiration here!

  40. 40
    Birdyoshi
    February 5th, 2009 6:50 am

    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)…

  41. 41
    luxbrand
    February 5th, 2009 6:57 am

    Some 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. 42
    Marianna
    February 5th, 2009 8:14 am

    Thanks for this post. Really creative and inspiring navigation menus, though I would also agree that they are not all user-friendly.

  43. 43
    Tammy Hart
    February 5th, 2009 8:15 am

    Great inspiration, thanks so much again!

  44. 44
    BoredReader
    February 5th, 2009 8:31 am

    How 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. 45
    Ash
    February 5th, 2009 9:01 am

    Gorgeous selection ! Thanx a lot.

  46. 46
    Jeffrey
    February 5th, 2009 9:36 am

    Nice 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. 47
    dude
    February 5th, 2009 9:43 am

    you people have some of the worst fucking taste on the internet.

  48. 48
    Chris Robinson
    February 5th, 2009 9:57 am

    some nice selections, some not so hot

  49. 49
    beto machado
    February 5th, 2009 9:57 am

    really nice article dude, congratz.

    i always read smashing magazine but this time you rock!

  50. 50
    Bill Dagg
    February 5th, 2009 10:03 am

    I’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. 51
    AudioDork
    February 5th, 2009 10:41 am

    Uh. It’s RE-201, not SE-201. Not that anyone cares… ho hum.

  52. 52
    Euge
    February 5th, 2009 11:25 am

    Can some of these be used with Wordpress?

  53. 53
    Charles
    February 5th, 2009 12:13 pm

    This 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. 54
    Greg Johnson
    February 5th, 2009 12:18 pm

    These 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. 55
    Florian Stelter
    February 5th, 2009 12:35 pm

    And another nice CSS-Navigation from a german website: http://www.liberty-homes.de

  56. 56
    Brandon Carson
    February 5th, 2009 12:58 pm

    Thanks Matt for the shout out!

  57. 57
    Burclar
    February 5th, 2009 1:07 pm

    Really great job smash magazine i like that “Designsensory” Menu it has perfect web design too .

  58. 58
    Rui Alão
    February 5th, 2009 1:29 pm

    Hi, Matt. just a note: Nando (of Nando Designer) is not portuguese, he’s brazilian, from Rio de Janeiro.

    cheers!

    Rui

  59. 59
    Courtny Cotten
    February 5th, 2009 2:38 pm

    I 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. 60
    Jason Reed
    February 5th, 2009 2:59 pm

    I 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. 61
    Margaret
    February 5th, 2009 8:20 pm

    Thanks for the compilation =) Seems hover menus and tabs are pretty common

  62. 62
    Eren Emre Kanal
    February 5th, 2009 8:29 pm

    50 Beautiful And User-Friendly Navigation Menus.

    But thanks :)

  63. 63
    Rene
    February 5th, 2009 11:41 pm

    amazing! Thx!

  64. 64
    David Leggett
    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. 65
    Knoxville Website Design
    February 6th, 2009 6:24 am

    Nice collection here to revisit from time to time.

  66. 66
    archknight79
    February 6th, 2009 8:35 am

    nice one really! :D

  67. 67
    devlim.com
    February 6th, 2009 8:47 am

    Really nice collection, Thank!

  68. 68
    David Stewart
    February 6th, 2009 10:03 am

    The 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. 69
    teddY
    February 6th, 2009 12:17 pm

    That’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. 70
    me
    February 6th, 2009 1:56 pm

    The 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. 71
    Mushex Antaranian
    February 6th, 2009 5:32 pm

    Adidas.com – beautiful but not user friendly ..

  72. 72
    Keith Moore
    February 7th, 2009 3:36 am

    A very nice CSS/Java menu I’ve found at http://www.nextframe.ro . You might want to include this too.

  73. 73
    Ralph
    February 7th, 2009 10:32 am

    Many great ideas. Thank you.

  74. 74
    Christopher Peterson
    February 7th, 2009 2:16 pm

    This 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. 75
    yelloface
    February 7th, 2009 4:52 pm

    Matt, thanks for adding my website nopokographics in your list.
    Great job guy!
    Keep going!

  76. 76
    Web Designer
    February 9th, 2009 4:32 am

    Some very nice examples.

  77. 77
    AthenaEmily
    February 9th, 2009 6:32 am

    Thanks very much for the nice list, you guys always showcase things that are truly inspiring and fresh! Thanks!

  78. 78
    Ronny Pries
    February 10th, 2009 1:09 am

    Thx a dozen for the apprecation – SM ftw!

  79. 79
    Blogger Template
    February 11th, 2009 6:34 am

    Wow great collection and thanks for the list.

  80. 80
    Wouter Van den Neste
    February 11th, 2009 6:47 pm

    Real nice article! There are some great innovative ideas included in this post!

  81. 81
    Derek Herman
    February 12th, 2009 1:56 am

    I 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. 82
    Usman Arshad
    February 12th, 2009 2:08 am

    Thanks a lot for sharing, keep it up!

  83. 83
    delirium
    February 14th, 2009 3:50 pm

    cool! thanks

  84. 84
    Daniel
    March 4th, 2009 5:30 pm

    These 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. 85
    Slovica
    March 5th, 2009 7:33 pm

    Many thanks!

  86. 86
    Jones
    March 16th, 2009 6:31 pm

    Nick Tones sounds much cooler but it’s Nick Jones. Thanks so much for including me though!

  87. 87
    Bold Endeavours
    March 26th, 2009 2:39 am

    this is amasing! i am really impressed by the variety of menues. thank you

  88. 88
    mahesh
    April 6th, 2009 4:21 am

    awesome list

    Thnks guys.

  89. 89
    asma
    April 6th, 2009 8:54 pm

    very nice post.. But i feel NickAd is not user friendly..

  90. 90
    William A
    April 23rd, 2009 8:44 am

    Can Nick Tones’ be made in CSS as well? Any idea or other examples?

  91. 91
    Will
    April 24th, 2009 12:51 am

    Some 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. 92
    Me
    May 13th, 2009 7:06 am

    Some 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. 93
    Rob
    August 8th, 2009 10:09 pm

    What about Ajax Web Awards menu?

  94. 94
    linob
    September 23rd, 2009 10:33 am

    Very good collection

  95. 95
    Jim
    October 15th, 2009 6:47 am

    Great article. And of course there is the easy way to create flash menus using FMF: http://www.flashmenufactory.com/

  96. 96
    Felix
    January 4th, 2010 7:56 am

    I love macrabbit’s menu!

  97. 97
    Amie
    January 5th, 2010 11:00 am

    Where in the world can you learn to make these masterpieces?? Books, articles, tutorials? Anyone?!!!

  1. 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!



Advertisement Advertise with us!
Join in Smashing Forum
Post your job