Menu Search
Jump to the content X X
Smashing Conf San Francisco

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

Web Design Navigation Menus – Articles And A Beautiful Showcase

This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to Web Design navigation and published here over all the years. [Content Care Nov/28/2016]

The Elements Of Navigation1

When users look for information, they have a goal and are on a mission. Even before you started to read this article, chances are you did because you either had the implicit goal of checking what’s new on Smashing Magazine, or had the explicit goal of finding information about “Navigation Design”.

Navigation - Test2

This article is about the tiniest of details that goes into creating the main centerpiece of your digital product—the construction of the elements of your navigation. This is the most important aid you can possibly give to your users as they are constantly seeking a reason to walk out on you.

Read more…3

Planning And Implementing Website Navigation4

The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Navigation can be simple or complex: a few main pages or a multi-level architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation.

New Strategy5

Designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.”

Read more…6

Showcase of Creative Navigation Menus: Good and Bad Examples7

Good navigation is the main cornerstone of an effective website. In practice, however, it’s often a tough challenge to come up with a meaningful, unambiguous way to organize, arrange, and display content to users; and it’s often not much easier to find a visually interesting solution either. The wide adaption of JavaScript libraries like jQuery is making it increasingly easy to add various kinds of sleek animations to navigation design.

Design Intellection8

For instance, many recent promo websites are essentially single page websites with an array of animation effects used to make navigation a smoother and richer user experience. We need to be very careful and cautious when using these dynamic effects in our designs. A simple, calm navigation is usually much more user-friendly than an evolved, dynamic one. Users want to use the website, not be baffled by the weird and hardly usable navigation. But that’s not to say that a creative navigation should be avoided at all costs.

Read more…9

Showcase of Interesting Navigation Designs10

Everyone is always looking for interesting and effective ways to organize their website and allow users to move about and find things. But there’s a fine line between unexpected and unusable. Three points to consider in any navigation scheme are consistency, user expectations and contextual clues.

Foundation Six Portfolio11

If page is long and provides different levels of navigation, will users be able to find their way through the site and use proper navigation quickly? Forcing visitors to use certain keystrokes to navigate, rather than what they’re used to, might be novel, but is that effective if you have to explain instructions prominently on your home page? Here are some examples for your reading pleasure.

Read more…12

Showcase Of Beautiful Vertical Navigation Designs13

Go to any website and you’re guaranteed to find one thing: a navigation menu. Navigation menus enable visitors to move from page to page; without them, we would have no way to conveniently explore websites. Perhaps this is why designers, information architects, usability researchers and user experience specialists invest so much time and resources into devising aesthetically pleasing and user-friendly navigation systems.

gary's real life14

Website navigation menus generally come in one of two orientations: vertical and horizontal. Horizontal navigation menus display items side by side. Vertical navigation menus stack items on top of each other. In this post, we highlight some remarkable vertical navigation menus, for your inspiration.

Read more…15

Showcase Of Modern Navigation Design Trends16

The navigation menu is perhaps a website’s single most important component. Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites. Because of their value to websites, navigation menus are customarily placed in the most visible location of the page, and thus can make a significant impact on the visitor’s first impression.

Delibar17

The design of a navigation menu has to be outstanding in order to sustain the user’s interest. As the adage goes, “Content is king,” but getting to the content requires navigation. In this post, we’ll be explore some of the more recent trends in navigation design. We’ll look at the aesthetics that recur in today’s best Web designs. The focus here is on the visual direction that leading designers are taking.

Read more…18

Horizontal Navigation Menus: Trends, Patterns, and Best Practices19

The horizontal navigation menu has become a mainstay in Web design. It is safe to say that nowadays most websites use some form of horizontal navigation to facilitate content browsing. The dominance of horizontal navigation over vertical (i.e. down a sidebar) is obviously due to the design and content limitations of the latter. Notably, CNN discovered those limitations20 before switching from vertical to horizontal a few years back.

ImpulseNav Screenshot21

There are, however, many styles of horizontal navigation in modern Web design. Some offer usability advantages for certain types of websites, while others are aesthetically better. In this article, we will focus on a variety of techniques and best practices to improve the usability of horizontal navigation bars, and we will note less effective styles. We’ll also look at several trends that developers can choose from when working on the navigation design for their next project.

Read more…22

Showcase Of Well-Designed Tabbed Navigation23

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.

Screenshot24

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.

Read more…25

Designing Drop-Down Menus: Examples and Best Practices26

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

Yes, that’s right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study27, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user’s choices with effective use of typography, icons, and tooltips.

Screenshot28

In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus.

Read more…29

Navigation Menus: Trends and Examples30

Navigation is the most significant element in web design. Since web-layouts don’t have any physical representation a user can stick to, consistent navigation menu is one of the few design elements which provide users with some sense of orientation and guide them through the site. Users should be able to rely on it which is why designers shouldn’t mess around with it.

That’s why in most cases it’s where simple, intuitive and conventional solutions are usually the best option. However, it doesn’t mean that they need to be boring. One year ago we’ve presented modern approaches of navigation design31. Let’s take a look at what’s different now, which trends one can observe and what ideas you can develop further in your projects.

Screenshot32

This article presents recent trends, examples and innovative solutions for design of modern navigation menus. All images are clickable and lead to the sites from which they’ve been taken. We’ve missed something? Definitely! Let us know in the comments!

Read more…33

Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites34

When users land on your website, they typically read the content available. Then, the next thing that they will do is to try and familiarize themselves with your website. Most of the time this involves looking for navigation.

Portfolio Navigation Main Image35

In this article, I’ll be analyzing the navigation elements of a particular category of websites, i.e. portfolios. Why portfolios, you ask? Because they represent an interesting blend of creativity and development techniques. As they offer an intriguing user interface and interaction, this often borderlines with what is ultimately defined as an enjoyable user experience. Should aesthetics, originality and creativity come at the expense of usability? Can they reside on the same website in harmony?

Read more…36

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.

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

Clearleft uses a couple of paper pieces for its navigation.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

Patricia Abbott uses clothespins for the navigation options.

Screenshot

Matt Dempsey highlights his navigation options with a brush stroke.

Screenshot

The current navigation option is pressed — clear and intuitive.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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!

Screenshot

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.

Screenshot

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

Screenshot

Some designers integrate a stamp in the contact navigation option.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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.

Screenshot

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!

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

Another usable accordion menu that groups portfolio items.

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

FreelanceSwitch organizes its articles using a great menu.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

A simple and minimalist menu with sliding effects.

Screenshot

Another clean and well-spaced list menu.

Screenshot

(vf) (il) (sl) (al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
  2. 2 https://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
  3. 3 https://www.smashingmagazine.com/2012/03/20/the-elements-of-navigation/
  4. 4 https://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/
  5. 5 https://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/
  6. 6 https://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation//#more-96551
  7. 7 https://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/
  8. 8 https://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples/
  9. 9 https://www.smashingmagazine.com/2011/04/19/showcase-of-creative-navigation-menus-good-and-bad-examples//#more-93604
  10. 10 https://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
  11. 11 https://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
  12. 12 https://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs//#more-60037
  13. 13 https://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/
  14. 14 https://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs/
  15. 15 https://www.smashingmagazine.com/2010/04/19/showcase-of-beautiful-vertical-navigation-designs//#more-38064
  16. 16 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  17. 17 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
  18. 18 https://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends//#more-22959
  19. 19 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
  20. 20 http://www.uie.com/brainsparks/2006/04/26/horizontal-navigation/
  21. 21 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices/
  22. 22 https://www.smashingmagazine.com/2009/09/07/horizontal-navigation-menus-trends-patterns-and-best-practices//#more-9853
  23. 23 https://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
  24. 24 https://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation/
  25. 25 https://www.smashingmagazine.com/2009/04/06/showcase-of-well-designed-tabbed-navigation//#more-5522
  26. 26 https://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  27. 27 http://www.useit.com/alertbox/mega-dropdown-menus.html
  28. 28 https://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  29. 29 https://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices//#more-5082
  30. 30 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  31. 31 https://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
  32. 32 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
  33. 33 https://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples//#more-345
  34. 34 https://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
  35. 35 https://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/
  36. 36 https://www.smashingmagazine.com/2012/03/26/an-analysis-navigation-portfolio-websites/

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

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

    4
  3. 3

    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.

    -1
  4. 4

    Chris Sanders

    February 4, 2009 4:33 pm

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

    2
  5. 5

    Curt Simon Harlinghausen

    February 4, 2009 5:18 pm

    Great article. Inspiration and nice collection.

    1
  6. 6

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

    1
  7. 7

    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!

    0
  8. 8

    Juliet van Ree

    February 4, 2009 7:35 pm

    Good post!

    0
  9. 9

    Brian Gottier

    February 4, 2009 7:57 pm

    That smallstone.com menu is pretty sweet

    -1
  10. 10

    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.

    2
  11. 11

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

    0
  12. 12

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

    0
  13. 13

    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.

    0
  14. 14

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

    0
  15. 15

    Klaye Morrison

    February 4, 2009 4:58 pm

    Great list! Thanks guys.

    1
  16. 16

    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

    0
  17. 17

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

    0
  18. 18

    Thanks You.~

    1
  19. 19

    Great list, although some of them seem pretty standard…

    0
  20. 20

    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.

    1
  21. 21

    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.

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

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

    0
  24. 24

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

    0
  25. 25

    Really nice list! :) Good job!

    0
  26. 26

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

    0
  27. 27

    Very good collections. Thank you.

    0
  28. 28

    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

    1
  29. 29

    That would be “Portuguese”. Nice post!

    0
  30. 30

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

    0
  31. 31

    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?

    0
  32. 32

    Some really awesome navigations. Thanks for sharing.

    0
  33. 33

    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…

    0
  34. 34

    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.

    0
  35. 35

    Really nice!!

    This one is an old label menu, good too

    Avance Import

    0
  36. 36

    Wow, lots of inspiration here!

    0
  37. 37

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

    0
  38. 38

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

    0
  39. 39

    Great inspiration, thanks so much again!

    0
  40. 40

    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.

    0
  41. 41

    Gorgeous selection ! Thanx a lot.

    0
  42. 42

    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.

    0
  43. 43

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

    0
  44. 44

    Chris Robinson

    February 5, 2009 9:57 am

    some nice selections, some not so hot

    0
  45. 45

    really nice article dude, congratz.

    i always read smashing magazine but this time you rock!

    0
  46. 46

    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.

    0
  47. 47

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

    0
  48. 48

    Can some of these be used with WordPress?

    0
  49. 49

    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.

    0
  50. 50

    Brandon Carson

    February 5, 2009 12:58 pm

    Thanks Matt for the shout out!

    0
  51. 51

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

    0
  52. 52

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

    cheers!

    Rui

    0
  53. 53

    Courtny Cotten

    February 5, 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.

    0
  54. 54

    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.

    0
  55. 55

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

    0
  56. 56

    Eren Emre Kanal

    February 5, 2009 8:29 pm

    50 Beautiful And User-Friendly Navigation Menus.

    But thanks :)

    0
  57. 57

    amazing! Thx!

    0
  58. 58

    @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 =/

    0
  59. 59

    nice one really! :D

    0
  60. 60

    Really nice collection, Thank!

    0
  61. 61

    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.

    0
  62. 62

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

    0
  63. 63

    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

    0
  64. 64

    Many great ideas. Thank you.

    0
  65. 65

    Christopher Peterson

    February 7, 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.

    0
  66. 66

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

    0
  67. 67

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

    0
  68. 68

    Thx a dozen for the apprecation – SM ftw!

    0
  69. 69

    Wouter Van den Neste

    February 11, 2009 6:47 pm

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

    0
  70. 70

    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.

    0
  71. 71

    Thanks a lot for sharing, keep it up!

    0
  72. 72

    cool! thanks

    0
  73. 73

    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.

    0
  74. 74

    Many thanks!

    0
  75. 75

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

    0
  76. 76

    Bold Endeavours

    March 26, 2009 2:39 am

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

    0
  77. 78

    awesome list

    Thnks guys.

    0
  78. 79

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

    0
  79. 80

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

    0
  80. 81

    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.

    0
  81. 82

    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. :/

    0
  82. 83

    Very good collection

    0
  83. 84

    I love macrabbit’s menu!

    0
  84. 85

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

    0
  85. 86

    These are truly excellent, well done

    0
  86. 87

    These are excellent compilations of navigation menus and websites that have outstanding designs. Keep them coming.

    0
  87. 88

    This post was just what I needed to see. I had my Google Chrome opened alongside Firefox. I had Flash and Java turned OFF on Firefox. This allowed me to go through all of the websites and see what was powered by Flash, Java, and other, which gave me better intuition on how I can use each application in different ways. Thank you for helping a budding web designer.

    1
  88. 89

    vishal shigvan

    August 4, 2010 2:49 am

    thanx
    nice collections

    1
  89. 90

    I like it very very much, thank you! :)

    -1
  90. 91

    Sanford Kloefkorn

    November 10, 2010 11:08 am

    This is actually one of the superior posts regarding people who We have please read on that theme nowadays. Good deliver the results.

    1
  91. 92

    I like dfw upa. I think it can be a good inspiration for my new menu on mikolajki24.com.

    Thanks for this great showcase!

    0
  92. 93

    umesh shejole

    August 4, 2011 9:43 pm

    These all navigation menu are very beautiful and nice designed………

    -1
  93. 94

    Hi..
    Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

    3
  94. 95

    keep me informed with any updates

    0

↑ Back to top