Navigation Menus: Trends and Examples

Advertisement

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

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!

1. Trend toward “speaking” block navigation

The most significant task a navigation menu has to fulfill is to unambiguously guide the visitors through the different sections of the site. However, often it’s quite hard to communicate the content of a site section within one or two single keywords, particularly if horizontal navigation is in use. That’s why often navigation options aren’t simply listed one after each other using some appropriate keyword (“silent” navigation); instead, designers attempt to concretely explain which options are available and what the visitor should expect from site sections once clicking on corresponding links.

In fact, over the last months we’ve observed a strong trend toward exactly this navigation scheme; and since designers try to initiate a more effective dialogue with visitors we prefer to call it “speaking” navigation — contrary to “silent” navigation based upon the listing of keywords.

Screenshot2

Screenshot3

Screenshot4

Screenshot5

To make the perception of information easier, the navigation is often structured by using blocks of the same height and width; large icons are used quite often, but in most cases the decision whether they are appropriate or not depends on the content of the site and the overall layout. “Soft” hover-effects often support the navigation design by making the browsing more pleasant.

Screenshot6

Screenshot7

Screenshot8

Screenshot9

Screenshot10

This navigation scheme can be used not only for the horizontal navigation; it can can be applied to vertical navigation as well.

Screenshot11

Screenshot12

2. Mac-style still popular?

One can discuss if the Mac-style is the survivor of the Web 2.0 design attack or it becomes a standalone design element used independently from glossy colorful buttons with 3D-effects. Or maybe it’s just a temporary trends toward grunge style13 — nobody knows, really.

In any case over the last months a number of web-sites integrated Mac-styled-navigation in their web-sites. What’s interesting is that the style is used not only on Apple-related sites, but also on web-sites which aren’t directly related to Mac. Particularly when it comes to design of software products traditional Mac-style is often imitated. Reason: it is visually appealing and looks cool.

Screenshot14

Screenshot15

Screenshot16

Screenshot17

Screenshot18

A navigation bar doesn’t need to look exactly like a typical Mac-style-navigation. Variations are also possible.

Screenshot19
“Green” version of the traditional Mac-style menu

Screenshot20

Since navigation bars can’t exist alone and need to be supported by the overall design, colorful one-page-sites with happy talk and overused stock photos designers are being replaced with more decent, serious and calm layouts. And that’s a good thing. However, when using the Mac-style please keep in mind that it shouldn’t be used for the sake of it but has to fit to the overall design.

3. Visually appealing icons are used more often

To communicate navigation options in a more effective way, designers often make use of appealing icons. In such cases it’s important to make sure that the icon is easily recognizable, clearly conveys the message, corresponds to the link it stands for and isn’t too small. Attractive icons are, of course, always preferred to the boring ones.

Screenshot21

Screenshot22
Icons can also be hidden into the links; this effect should be used sparingly.

Screenshot23

Screenshot24

Screenshot25

Screenshot26

Screenshot27

Screenshot28

Screenshot

Icons can be placed on the left-hand side…

Screenshot29

…and on the right-hand side in the sidebar.

Screenshot30

4. Vertical tabs

Although traditional desktop-applications almost never make use of vertical tabs, in the office vertical tabs are used at least as often as horizontal ones. In fact, designers often try it out; and the results can be quite interesting.

Before using vertical tabs you should make sure that it is possible within your layout and you actually have enough area to cover all navigation options on every single page. And, of course, the text is harder to read.

Screenshot31

Screenshot32

Screenshot33

Screenshot34

Screenshot35

Tabs on the right-hand side.

5. Handwriting in use.

Recently we already discussed36 the hand-drawing style in modern web-design. And what holds for design layouts also holds for its specific elements — for instance, for navigation.

Screenshot37

Screenshot38

Screenshot39

Screenshot40

Screenshot

Screenshot41

Screenshot42

Screenshot43

6. Experimental solutions

Although it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it.

DesignForFun44 uses icons to help visitors to filter the content they’re looking for. Depending on the clicked icon the background of corresponding links changes. However, the selection of icons may be not the best one as it’s unclear hat icons stand for. Fortunately, title attribute is in use.

Screenshot45

Screenshot46

Interesting concept: the hover-effect on jBunti47 depends on the selected month of the year. Warm months are associated with reddish colors, cold months with blueish colors. 12 hover-colors in use.

Screenshot48

Playground Blues49 tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded.

Screenshot50

Steven Holl51 is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.

Screenshot52

Polkdesign53 uses a calender as the central navigation element. Flash.

Screenshot54

Hopkingdesign55 offers not a tabbed-navigation; it’s a vertical navigation placed at the top of the page. Looks at least unusual.

Screenshot56

No, Adipintilie.eu57 has navigation options also placed at the top; however, these are only external links.

Screenshot58

Flash-based 3D-effect used on Gol.com.pl59. The menu can also be expanded.

Screenshot60

The navigation on Wards-Exchange.co.uk61 fits to the brochure design. Or the other way around.

Screenshot62

On Kriesi.at63 the hovered navigation option is dynamically expanded and shows the icons which illustrate what to expect in the section of the site. The effect is in this case not necessary.

Screenshot64

Not really new, but still beautiful. Folietto.at65 uses the free area effectively and sparingly. You may notice an interesting visual effect when hovering the links.

Screenshot66

inBloom67 has a menu with animation. The beetle doesn’t care what option you choose, it crawls its long path through the navigation tree anyway. This is an example of how animation can be unobtrusive.

Screenshot68

Cobahair.co.uk69 uses only BIG typography…

Screenshot70

…and HelloColor.com71 uses small typography with rainbow colors.

Screenshot72

Carbonstudio.co.uk73 delivers a Flash-based navigation menu with sound-effects. It may sound annoying, but it isn’t: every navigation option has its own sound. If you train yourself a little bit you can even play your own melody while listening to birds in the background.

Screenshot74

Maxandlous.com75 provides hover-effects with visual hints. It looks nice and unusual.

Screenshot76

Scrollomania in all possible directions on Letters-Numbers.com77.

Screenshot78

OK, how can you come up with this one? Nickad79‘s Flash-based construct becomes visible only if the mouse is clicked and remains being clicked.

Screenshot80

Nike81 offers a kind of remote control. To navigate you need to click and drag. While dragging, move the mouse up to move forward, down to move backward, and left/right to turn.

82

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions/
  2. 2 http://www.evaneckard.com/
  3. 3 http://www.30elm.com/
  4. 4 http://freelanceswitch.com/
  5. 5 http://www.okb.es/
  6. 6 http://pixelresort.com/
  7. 7 http://www.digitalartifex.com/
  8. 8 http://www.panic.com/candybar/
  9. 9 http://lonnroth.info/
  10. 10 http://www.rakacreative.com/
  11. 11 http://www.intereactive.net/
  12. 12 http://worshipleaderinsights.com/
  13. 13 http://www.smashingmagazine.com/2008/01/29/grunge-style-in-modern-web-design/
  14. 14 http://www.apple.com/finalcutstudio/
  15. 15 http://www.tenbytwenty.com/
  16. 16 http://www.tenforce.eu/blog/
  17. 17 http://www.newspond.com/
  18. 18 http://www.joyent.com/
  19. 19 http://www.ttthings.com/
  20. 20 http://qrayg.com/learn/
  21. 21 http://lonnroth.info/
  22. 22 http://www.cssbeauty.com
  23. 23 http://www.macrabbit.com
  24. 24 http://thediscountbox.co.uk/
  25. 25 http://tastyplanner.com/
  26. 26 http://www.webinventif.fr/barre-de-navigation-fixe-depliable-et-transparente/
  27. 27 http://nitram-nunca.com/
  28. 28 http://wp-themes.designdisease.com/
  29. 29 http://blog.fluxiom.com/
  30. 30 http://rawnet.com/
  31. 31 http://www.volume5.co.uk/showcase.html
  32. 32 http://dizidesigns.co.uk/
  33. 33 http://www.compacto-design.com/
  34. 34 http://www.prague-guide.fr/
  35. 35 http://miss.ivytan.net/
  36. 36 http://www.smashingmagazine.com/2008/01/03/hand-drawing-style-in-modern-web-design/
  37. 37 http://satsu.co.uk/
  38. 38 http://www.sarahhyland.com/
  39. 39 http://www.squawkdesign.com/
  40. 40 http://www2.elansnowboards.com/
  41. 41 http://ohiosadd.org/
  42. 42 http://oink.elrellano.com/
  43. 43 http://www.cassysdesign.ro/
  44. 44 http://designforfun.com/portfolio.php
  45. 45 http://designforfun.com/portfolio.php
  46. 46 http://designforfun.com/portfolio.php
  47. 47 http://done.jbunti.com/
  48. 48 http://done.jbunti.com/
  49. 49 http://www.playgroundblues.com/
  50. 50 http://www.playgroundblues.com/
  51. 51 http://www.stevenholl.com/
  52. 52 http://www.stevenholl.com/
  53. 53 http://www.polkdesign.net
  54. 54 http://www.polkdesign.net
  55. 55 http://www.hopkingdesign.com/
  56. 56 http://www.hopkingdesign.com/
  57. 57 http://www.adipintilie.eu/
  58. 58 http://www.adipintilie.eu/
  59. 59 http://www.gol.com.pl/
  60. 60 http://www.gol.com.pl/
  61. 61 http://www.wards-exchange.co.uk/
  62. 62 http://www.wards-exchange.co.uk/
  63. 63 http://www.kriesi.at/
  64. 64 http://www.kriesi.at/
  65. 65 http://folietto.at
  66. 66 http://folietto.at
  67. 67 http://www.inbloomproductions.com
  68. 68 http://www.inbloomproductions.com
  69. 69 http://www.cobahair.co.uk
  70. 70 http://www.cobahair.co.uk
  71. 71 http://www.hellocolor.com
  72. 72 http://www.hellocolor.com
  73. 73 http://www.carbonstudio.co.uk/
  74. 74 http://www.carbonstudio.co.uk/
  75. 75 http://www.maxandlous.com/
  76. 76 http://www.maxandlous.com/
  77. 77 http://www.letters-numbers.com/
  78. 78 http://www.letters-numbers.com/
  79. 79 http://www.nickad.com/
  80. 80 http://www.nickad.com/
  81. 81 http://www.nike.com/jumpman23/xx3/
  82. 82 http://www.nike.com/jumpman23/xx3/

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Cool collections…was dreaming in blend of color they use..

    -1
  2. 52

    Thanks, great posts!

    0
  3. 103

    Outstanding.

    0
  4. 154

    wonderful portfolio of ideas … :)
    thx for that

    0
  5. 205

    Ya know, smashing magazine really pisses me off. Every time I read a post this good I get really frustrated and start thinking “do I have to redo my site” and “is my site good enough?” I have to stop and take a couple deep breaths and put everything back into perspective. That typography poster article is still haunting me because some of the design is so fresh.

    0
  6. 256

    I love the content you offer. One suggestion however; it would be much easier if you could code the links to open up in a new window or tab versus the parent page. That way I could review the content and easily return to your page and pick back up where I left off. Anyway, keep up the good work. It is always nice to see relevant content.

    -2
  7. 307

    Wath about my horizontal menu? http://www.imaginepaolo.com

    -1
  8. 358

    This really is the best site ever. It really helps with ideas. Keep them coming!

    0
  9. 409

    Very nice collection… i like them especially mac type navigations… thanks.

    -2
  10. 460

    Great source of inspiration for the designer with a heavy workload!

    vertical tabs can’t be live text, so there are accessibility and updateability issues. You need a very good reason to go to the vertical menu!!

    0
  11. 511

    Peer Wandiger - Selbständig im Netz

    February 28, 2008 11:58 pm

    That’s a great resource of different navigations. Many of them are really beautiful.
    I will bookmark this page to get inspiration when I need it.

    0
  12. 562

    Nice collection!

    -1
  13. 664

    While some of them look good, we also need to admit that many of them are a usability nightmare…

    0
  14. 715

    Thank you for this list. It’s awesome.
    “1. Trend toward “speaking” block navigation” I have seen these styles during the [dot com bubble].
    What it was was the 2 language combination, both horizontal and vertical navigation styles.
    However, the idea of speaking navigation is the trend…

    -2
  15. 766

    yeah… great article with many very nice ideas for me. Example 2 is similar like here: Restaurant zenSuR.

    thank you for your great job

    From Germany

    Ralph

    0
  16. 817

    Awesome design tips! Thanks a lot!

    -2
  17. 868

    very usefull article
    thank you for your effort
    the vertical navigation is hard to read as you said and it’s not suitable for common use
    NIckad and the playground blues menus are the worse because it’s not cross browser compatible and you can easily miss it
    but you put other great resources for grea ideas
    thank you

    -2
  18. 919

    Some of these concepts are great, unfortunatelythe coding is kind ofcrap on a few of them they don’t work on my MAC :(

    -2
  19. 970

    Great collection :) I like them! Good work!

    0
  20. 1021

    Charlie Nielsen

    March 4, 2008 1:48 am

    Hmm .. Nice collection with a good overview. I guess that finding the right solution is a simple matter of planning the design thoroughly through first. Vertical tabs are pretty nifty as the save space, that can be used way more intelligent, but as they’re harder to read, the typography and usage is important. I’m thinking of using some in one of our systems as a test .. (it’s just css, so why not try it ..) :D

    -2
  21. 1072

    Can someone explain me how i can realise a menu like the digitalartifex.com guys?
    I am sure there is a complete solution somewhere in the internet.

    0
  22. 1123

    I’m not sure whether your comments are valid as , with all due respect, your site is an absolute mess.

    -2
  23. 1174

    Nice list. Although there seems to be a lot of people missing the point of articles like this – someone mentioned that all sites should use breadcrumbs for navigation…are you serious?! Experimentation is the only way to truly move forward and lists like this one show what is possible.

    I think it’s worth noting that a large proportion of the more experimental navs are on designers sites who are showing that they’re capable of thinking outside the box. A lot of clients are looking for creativity so in these instances I think it’s entirely justifiable to have something less mainstream (as long as it stil works of course!)

    Just wanted to say that I really like the ‘speaking’ buttons style, there’s nothing worse than ambiguous navigation – and I bet it doesn’t hurt your page rankings either, aren’t descriptive links what Google are all about?

    0
  24. 1225

    really good list. Thanks!

    -2
  25. 1276

    Great collection ! Man thanks for another great post !

    0
  26. 1327

    Lovely round-up – I never knew that I had come to hate some styles of navigation so much. However lots of tasty ideas here too…

    0
  27. 1378

    Some beautiful navs there, just in process of redesigning my site and was goign to use javascript to make it more interesting but now I’m thinking it’s just not needed.

    -2
  28. 1429

    Real Gud ones..
    thanks a lot Smashing..

    u guys are real SMASHING…..

    -2
  29. 1480

    This page it’s really cool… these nav menu exemplos help me a lot .
    Good work!

    -2
  30. 1531

    I am a fan of the ‘speaking block’ navigation. There’s no better user experience than one where it feels the designer is holding your hand as you walk through the website.

    0
  31. 1582

    I think the mac button is not css. I reckon it is done in photoshop because as you can see in the button, it has a little bit gradient. You can do it in CSS but not perfectly look like what you can see in Mac Button and 1 more thing it should be web safe color. I suggest you to do it in Photoshop and use javascript for hovering the button.

    -2
  32. 1684

    very good!thanks

    -2
  33. 1735

    i really admire those authors who designed these works.
    so i think no matter whether it is popular still,
    at least it is art we appreciate.

    -2
  34. 1786

    they are are very good designers.. nice one!

    0
  35. 1837

    Oh, wow, thanks for the list! Gave me some ideas for my navigation. Man, menus are a pain in the ass…

    0
  36. 1888

    FAO: im suden

    It’s all very well quoting or linking to Jakob Neilsons site, but useable or not his site is incredibly ugly. In fact the content is so lacking in structure as to actually hinder useability – which content is important? Where do I look first? Why do I have to scroll to see some of the top level navigation?

    Laughable really.

    If you don’t believe there is any room for aesthetics in websites then why on earth come to a site that celebrates design?

    1
  37. 1939

    Good study of navigation design.
    very good.

    0
  38. 1990

    It’s all good stuff but I still like normal, traditional navigation.

    0
  39. 2041

    to the author of the article:

    what metrics do you have (other than the Apple example) that convince you that these are all sound UIs?

    1
  40. 2092

    very cool collections…
    My wishes to al those who ahve worked on this appealing set of navigation

    1
  41. 2143

    Very nice experimental navigation is used on website http://www.arin.cz

    1
  42. 2194

    Debabrata Ghosh

    April 29, 2008 9:29 pm

    Very nice collections and also very helpful for designers……..

    1
  43. 2245

    I love you more than i can do

    1
  44. 2296

    Perfect flash menu
    It’s online builder. You can create drop down or accordion menus or download component.

    1
  45. 2347

    hi,
    how can we use these theme?
    I would like a theme like the site “guide de prague”.

    1
  46. 2398

    thank you…

    0
  47. 2449

    thanks you

    0
  48. 2500

    thank you wery much

    0
  49. 2551

    Uhh… “mystery meat navigation”… menu options with sound effects.. I remember using those back in the 90s (and dropping them really fast)
    Excellent list, as usual, thanx!

    0
  50. 2602

    I hate vertical type. People read left to right, not up and down so i find this approach to navigation a little dodgey. Makes you want to tilt your head to the left so you can read it properly. I don’t foresee me ever using vertical type on anything. I think it is the worst thing ever.

    0

↑ Back to top