Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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 Link

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 be applied to vertical navigation as well.

Screenshot11
Screenshot12

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 websites integrated Mac-styled-navigation in their websites. What’s interesting is that the style is used not only on Apple-related sites, but also on websites 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
Screenshot
Screenshot16
Screenshot17

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

Screenshot
“Green” version of the traditional Mac-style menu
Screenshot18

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 Link

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.

Screenshot19
Screenshot20
Icons can also be hidden into the links; this effect should be used sparingly.
Screenshot21
Screenshot22
Screenshot
Screenshot
Screenshot23
Screenshot24
Screenshot

Icons can be placed on the left-hand side…

Screenshot25

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

Screenshot26

4. Vertical tabs Link

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.

Screenshot
Screenshot27
Screenshot28
Screenshot29
Screenshot

Tabs on the right-hand side.

5. Handwriting in use. Link

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

Screenshot
Screenshot31
Screenshot32
Screenshot33

Screenshot

Screenshot
Screenshot34
Screenshot35

6. Experimental solutions Link

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.

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

Screenshot
Screenshot

Interesting concept: the hover-effect on jBunti36 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.

Screenshot37

Playground Blues38 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.

Screenshot39

Steven Holl40 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.

Screenshot41

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

Screenshot

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

Screenshot43

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

Screenshot45

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

Screenshot47

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

Screenshot49

On Kriesi.at50 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.

Screenshot51

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

Screenshot53

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

Screenshot55

Cobahair.co.uk56 uses only BIG typography…

Screenshot57

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

Screenshot59

Carbonstudio.co.uk60 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.

Screenshot61

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

Screenshot63

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

Screenshot65

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

Screenshot67

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

Footnotes Link

  1. 1 /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 /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.newspond.com/
  17. 17 http://www.joyent.com/
  18. 18 http://qrayg.com/learn/
  19. 19 http://lonnroth.info/
  20. 20 http://www.cssbeauty.com
  21. 21 http://www.macrabbit.com
  22. 22 http://thediscountbox.co.uk/
  23. 23 http://nitram-nunca.com/
  24. 24 http://wp-themes.designdisease.com/
  25. 25 http://blog.fluxiom.com/
  26. 26 http://rawnet.com/
  27. 27 http://dizidesigns.co.uk/
  28. 28 http://www.compacto-design.com/
  29. 29 http://www.prague-guide.fr/
  30. 30 /2008/01/03/hand-drawing-style-in-modern-web-design/
  31. 31 http://www.sarahhyland.com/
  32. 32 http://www.squawkdesign.com/
  33. 33 http://www2.elansnowboards.com/
  34. 34 http://oink.elrellano.com/
  35. 35 http://www.cassysdesign.ro/
  36. 36 http://done.jbunti.com/
  37. 37 http://done.jbunti.com/
  38. 38 http://www.playgroundblues.com/
  39. 39 http://www.playgroundblues.com/
  40. 40 http://www.stevenholl.com/
  41. 41 http://www.stevenholl.com/
  42. 42 http://www.hopkingdesign.com/
  43. 43 http://www.hopkingdesign.com/
  44. 44 http://www.adipintilie.eu/
  45. 45 http://www.adipintilie.eu/
  46. 46 http://www.gol.com.pl/
  47. 47 http://www.gol.com.pl/
  48. 48 http://www.wards-exchange.co.uk/
  49. 49 http://www.wards-exchange.co.uk/
  50. 50 http://www.kriesi.at/
  51. 51 http://www.kriesi.at/
  52. 52 http://folietto.at
  53. 53 http://folietto.at
  54. 54 http://www.inbloomproductions.com
  55. 55 http://www.inbloomproductions.com
  56. 56 http://www.cobahair.co.uk
  57. 57 http://www.cobahair.co.uk
  58. 58 http://www.hellocolor.com
  59. 59 http://www.hellocolor.com
  60. 60 http://www.carbonstudio.co.uk/
  61. 61 http://www.carbonstudio.co.uk/
  62. 62 http://www.maxandlous.com/
  63. 63 http://www.maxandlous.com/
  64. 64 http://www.letters-numbers.com/
  65. 65 http://www.letters-numbers.com/
  66. 66 http://www.nickad.com/
  67. 67 http://www.nickad.com/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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 UX, front-end and performance problems in large companies. Get in touch.

Advertisement
  1. 1

    Really like cobahair.co.uk. A great list. Thanx.

    -2
  2. 2

    Most users don’t use universal navigation. These might be new approaches, but they don’t really serve any useful purpose. Most actually hinder navigation. Reading horizontally strikes me as particularly silly, while having to explain a link is admitting that you can’t express yourself concisely. All they tell me is that the designer can either code some abstruse CSS and/or a graphic designer is in charge of the design.

    Contextual navigation (especially through breadcrumbs) should be the future. My site has no universal navigation apart from a logo in the top left corner that links to the home page.

    -6
  3. 3

    I really like the navigation on this site: http://timothysykes.com/
    Anyone here know how they did that? Is it ajax? I’m sure there’s some code available somewhere…

    -8
  4. 4

    I dont think mac style is still popular…

    My fav: letters-numbers.com

    -14
  5. 5

    Very nice collection again. Thank you…

    -2
  6. 6

    I’m not a fan of vertical tabs, but that’s just me I suppose – I find they’re ever-so-slightly harder to read than horizontally aligned text.

    ‘Speaking navigation’ is ok too – but one could argue that if the main link isn’t self explanatory, then it needs to be reworded – that extra text may ‘help’ explain, but in many cases, I feel it’s overkill.

    0
  7. 7

    I good variance in navigation types. This should be a good reference to come back to whenever a navigation creative block comes about.

    Personally, I think navigation design is what makes websites in today’s world so popular. Intuitive, and more importantly user centered navigation is what makes some sites so popular. Content is easy to reach without a lot of time searching mindlessly. The experimental navigation systems are nice, but I would always suggest only using them on “personal playground” sites, where a committed community is already willing to spend a few extra seconds to navigate to the content they desire, because they know the overall outcome is going to be beneficial.

    My suggestion for personal portfolio sites and more organized company showcases is to keep it simple. Sure, the client sees first hand exactly what kind of cool stuff you can do with Javascript or Flash, but if they have a hard time navigating to the section of your site that they want to see, it is going to say a lot about their own user centered design concerns.

    I feel like I am rambling…great list!

    2
  8. 8

    Nice collection, thanks…

    0
  9. 9

    Really nice collection! Thanks.

    -3
  10. 10

    Nice collection!

    -1
  11. 11

    I would like to ask question about css, isit possible to make the mac button in css which can be used in all browser? Anyone can help how to code it ?

    -3
  12. 12

    You are Smashing some great articles of late! Navigation is a topic I love to revisit often – it’s inspiring and fun to read of the new, old, new again trends etc.

    -2
  13. 13

    very useuful list, especially for inspiration for a new design im working on for my site! i ALWAYS loved the Mac designs, but im moving towards sites that have more icons on them to give user feedback.

    im not a fan of the grunge designs but i can see why they are popular.

    -2
  14. 14

    Nice collection, thanks for share.
    By the way… hellocolor.com link doesn’t work. I think you forget the “http://”

    -3
  15. 15

    Very nice collection!
    Thanks.

    -2
  16. 16

    Well done Smashing Magazine, another great article and a great collection of menus.

    I also like the effect used on this site:

    Looks like it uses Mootools for the menu effect and also hiding of the navigation.

    -2
  17. 17

    while it’s cool, NickAd’s site navigation raises my anxiety levels.

    -2
  18. 18

    Nice selection of menus there, made me feel like I’d better pull my finger out and sort mine now.

    -2
  19. 19

    Great selection as usual!
    I love the pink one, it could looks nice on my weblog. :)

    -2
  20. 20

    Very nice collection

    -2
  21. 21

    ..however, that rainbow menu is the one, that I had on my previous portfolio version, still to see at:

    http://nrb.oxygenetic.org/

    Thanks,
    P

    :]

    -2
  22. 22

    @lukxiufung (# 10)

    Yeah, there is an easy way to make all buttons universal using CSS (assuming you mean an input button such as submit).

    all you need to do is create a class and then apply it to your input tag.

    An example…

    input.button {
    background: url(“images/button.jpg”) top left no-repeat;
    width: 100px;
    height: 25px;
    }

    input.button:hover {
    background: url(“images/button_hover.jpg”) top left no-repeat;
    }

    Although a bit more advanced I would suggest creating both states in the same image and then just shifting the background position, this way you don’t get a weird white flicker while the hover state image loads.

    I am still learning CSS so by all means please someone correct me if I am wrong.

    -2
  23. 23

    Very nice collection. I like the experimental solutions, some of them really stands out!

    -2
  24. 24

    Braintrove.com

    February 26, 2008 5:13 pm

    Fun to see what people are using out there. As site overhauls are (or should be) few and far between so as not to overly confuse your visitors, it is important to find something visually appealing that works, and then make minor tweaks along the way.

    -2
  25. 25

    … i love you guys, but do you think that you can start making all your links open in a new window … ?
    that would be lovely seeing that you always have 50+ links on one posting …

    just something to ponder .

    -1
  26. 26

    The menu of this site is very different and beautiful: http://www.bambubali.com.br

    -3
    • 27

      No.. .that site has “mystery meat” navigation. Beautiful, maybe… but useless.

      -2
  27. 28

    That Nickad menu is really hard to use. :/

    -2
  28. 29

    We from enilsson use the vertical tabs as well… very interesting concept.

    http://www.enilsson.com

    -2
  29. 30

    One Winged Angel

    February 26, 2008 9:25 pm

    I keep saying ‘how beautiful they are’ – some of them, of course.. really inspire me.

    -2
  30. 31

    Great assembly as usual. Some go into making it really difficult and adventurous for the viewer to find his/her way, but I guess if that is the name of the game, so be it!

    Seeing some of the horizontal navigation tabs write ‘downward’ is (mostly) not reader friendly. Bottom up with base of font closer to the reader is what gives best readability.

    -2
  31. 32

    I am more of a horizontal menu bar with the hover effect matching the nav buttons to the rest. Vertical navigation just gives me a hard time.

    -2
  32. 33

    great collection! here´s a another “trendy” menu: http://www.pxldlx.de

    -2
  33. 34

    Nice collection guys..

    -2
  34. 35

    just superb!

    -2
  35. 36

    The mac style applied to a Geographic Information Service Web Application is very pleasant : http://www.metis-light.com
    This GIS Web Application is still under development (visual problems under IE…).

    -2
  36. 37

    Hey Keri, it looks like the “Timothy Sykes” site is using “jQuery”. A collection of various javascripts and a base collection of code for use on your websites. The effect is called “lava lamp”. I’ve seen it before and found that I liked how it looked and reacted too! Here is a link to where you can see the lava lamp code explained and there are some examples at the bottom of the page, one like the “Sykes” menu. http://www.gmarwaha.com/blog/?p=7

    -2
  37. 39

    nice picks! i think navigation on http://www.hejz.com is wicked as well

    -1
  38. 40

    Great inspirational collection! Also noticing the (small) trend in horizontal scrolling websites, not quite sure how I feel about this…guess it works in some situations.

    -2
  39. 41

    I think some of the ‘overly designed’ navigation completely miss the point of what navigation is supposed to be used for. What is the point of hiding the navigation??

    -2
  40. 42

    another awesome collection!

    -2

↑ Back to top