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

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

Evan in Navigation Menus: Trends and Examples

30 in Navigation Menus: Trends and Examples

Free in Navigation Menus: Trends and Examples

Okb in Navigation Menus: Trends and Examples

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.

Pix in Navigation Menus: Trends and Examples

Digi in Navigation Menus: Trends and Examples

Panic in Navigation Menus: Trends and Examples

Lon2 in Navigation Menus: Trends and Examples

Raka in Navigation Menus: Trends and Examples

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

Inter in Navigation Menus: Trends and Examples

Jason in Navigation Menus: Trends and Examples

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 style — 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.

Apple in Navigation Menus: Trends and Examples

Ten2 in Navigation Menus: Trends and Examples

Ten in Navigation Menus: Trends and Examples

Newspond in Navigation Menus: Trends and Examples

Joye in Navigation Menus: Trends and Examples

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

Ttt in Navigation Menus: Trends and Examples
“Green” version of the traditional Mac-style menu

Qra in Navigation Menus: Trends and Examples

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.

Lon in Navigation Menus: Trends and Examples

Menu-beauty in Navigation Menus: Trends and Examples
Icons can also be hidden into the links; this effect should be used sparingly.

Menurabbit in Navigation Menus: Trends and Examples

The in Navigation Menus: Trends and Examples

Tasty in Navigation Menus: Trends and Examples

Webinv in Navigation Menus: Trends and Examples

Nitram in Navigation Menus: Trends and Examples

Men-5-designdesease in Navigation Menus: Trends and Examples

Men-5-gotocss3 in Navigation Menus: Trends and Examples

Icons can be placed on the left-hand side…

Fluxiom in Navigation Menus: Trends and Examples

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

Rawnet in Navigation Menus: Trends and Examples

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.

Vol5 in Navigation Menus: Trends and Examples

Dizi in Navigation Menus: Trends and Examples

Compacto in Navigation Menus: Trends and Examples

Prague in Navigation Menus: Trends and Examples

Ivytan in Navigation Menus: Trends and Examples

Tabs on the right-hand side.

5. Handwriting in use.

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

Satsu in Navigation Menus: Trends and Examples

Sarah in Navigation Menus: Trends and Examples

Sq in Navigation Menus: Trends and Examples

Elan in Navigation Menus: Trends and Examples

Navi-2-1 in Navigation Menus: Trends and Examples

Ohio in Navigation Menus: Trends and Examples

Men-5-oink in Navigation Menus: Trends and Examples

Cassys in Navigation Menus: Trends and Examples

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.

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.

School-1 in Navigation Menus: Trends and Examples

School-2 in Navigation Menus: Trends and Examples

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

Done in Navigation Menus: Trends and Examples

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

Pl in Navigation Menus: Trends and Examples

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

Steven in Navigation Menus: Trends and Examples

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

Menupolk in Navigation Menus: Trends and Examples

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

Navi-2-5 in Navigation Menus: Trends and Examples

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

Men-5-adi in Navigation Menus: Trends and Examples

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

Gol in Navigation Menus: Trends and Examples

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

Men-5-wards in Navigation Menus: Trends and Examples

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

Kriesi in Navigation Menus: Trends and Examples

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

Men4-1 in Navigation Menus: Trends and Examples

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

Men4-14 in Navigation Menus: Trends and Examples

Cobahair.co.uk uses only BIG typography…

Menuhair in Navigation Menus: Trends and Examples

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

Menu-color in Navigation Menus: Trends and Examples

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

Carbonstudio in Navigation Menus: Trends and Examples

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

Navi-2-4 in Navigation Menus: Trends and Examples

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

Navi-2-6 in Navigation Menus: Trends and Examples

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

Nickad in Navigation Menus: Trends and Examples

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.

Xx3 in Navigation Menus: Trends and Examples

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

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

Tags: , , ,

Advertising
  1. 1
    Rolando Bouza
    February 26th, 2008 10:23 am

    I dont think mac style is still popular…

    My fav: letters-numbers.com

  2. 2
    readywpthemes
    February 26th, 2008 10:24 am

    Very nice collection again. Thank you…

  3. 3
    Shane
    February 26th, 2008 10:37 am

    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.

  4. 4
    Gelay
    February 26th, 2008 10:37 am

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

  5. 5
    Jason Reed
    February 26th, 2008 10:39 am

    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!

  6. 6
    niksy
    February 26th, 2008 10:40 am

    Nice collection, thanks…

  7. 7
    fatihturan
    February 26th, 2008 10:41 am

    Really nice collection! Thanks.

  8. 8
    im suden
    February 26th, 2008 11:05 am

    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.

  9. 9
    fck
    February 26th, 2008 11:21 am

    Nice collection!

  10. 10
    lukxiufung
    February 26th, 2008 11:45 am

    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 ?

  11. 11
    Brian
    February 26th, 2008 11:49 am

    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.

  12. 12
    Jeff Adams
    February 26th, 2008 11:59 am

    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.

  13. 13
    Cosmi
    February 26th, 2008 12:00 pm

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

  14. 14
    Daniel
    February 26th, 2008 12:09 pm

    Very nice collection!
    Thanks.

  15. 15
    Kerri
    February 26th, 2008 1:41 pm

    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…

  16. 16
    Ted
    February 26th, 2008 2:14 pm

    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.

  17. 17
    Greg
    February 26th, 2008 3:09 pm

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

  18. 18
    Aaron
    February 26th, 2008 3:28 pm

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

  19. 19
    pickupjojo
    February 26th, 2008 3:44 pm

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

  20. 20
    Erdem
    February 26th, 2008 3:55 pm

    Very nice collection

  21. 21
    HelloColor
    February 26th, 2008 4:09 pm

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

    :]

  22. 22
    Jason Reed
    February 26th, 2008 4:39 pm

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

  23. 23
    Jimmy
    February 26th, 2008 4:41 pm

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

  24. 24
    Braintrove.com
    February 26th, 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.

  25. 25
    steven
    February 26th, 2008 6:07 pm

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

  26. 26
    Lock Wes Monster
    February 26th, 2008 6:29 pm

    White Void

    Here is an example of an “experimental solution” that makes great use of papervision3d.

  27. 27
    Wender
    February 26th, 2008 7:08 pm

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

  28. 28
    John Faulds
    February 26th, 2008 7:33 pm

    That Nickad menu is really hard to use. :/

  29. 29
    Rafael
    February 26th, 2008 8:09 pm

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

    http://www.enilsson.com

  30. 30
    One Winged Angel
    February 26th, 2008 9:25 pm

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

  31. 31
    Marlyse Comte
    February 26th, 2008 10:10 pm

    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.

  32. 32
    Syed Balkhi
    February 26th, 2008 11:16 pm

    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.

  33. 33
    koollook
    February 27th, 2008 12:31 am

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

  34. 34
    Martijn Moes
    February 27th, 2008 1:02 am

    Nice collection guys..

  35. 35
    sergey
    February 27th, 2008 1:34 am

    just superb!

  36. 36
    Corentin
    February 27th, 2008 1:35 am

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

  37. 37
    WorkingMan
    February 27th, 2008 2:32 am

    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

  38. 38
    Giorgio
    February 27th, 2008 2:34 am

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

  39. 39
    Roweena
    February 27th, 2008 2:40 am

    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.

  40. 40
    rayelle
    February 27th, 2008 3:09 am

    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??

  41. 41
    superxtian
    February 27th, 2008 3:26 am

    another awesome collection!

  42. 42
    Gruppo Modulo
    February 27th, 2008 3:30 am

    Great collection, fantastic inspiration!

    Thank you!

  43. 43
    johno
    February 27th, 2008 4:01 am

    Very timely indeed. I was just thinking about redoing my own menus. Certainly bucket-loads of inspiration above. Many thanks SM.

  44. 44
    the l-i-n-k
    February 27th, 2008 4:08 am

    @rayelle I totally agree: Some of those navigation concepts are overdone.

    Navigation is crucial for a website, because you don’t have sheets to turn. But in any case the content is the reason to visit your website.

    Thank you for the elaborated collection – it’s interesting to see common principles, even if they might be critical or need discussion. That’s we’re on a blog…

  45. 45
    Daniel
    February 27th, 2008 5:46 am

    Fantastic! Thank you for this!

  46. 46
    Ivan
    February 27th, 2008 7:12 am

    Defign4Fun is my favorite! Dunno how he did it, but it works!

  47. 47
    Bruce Coursey
    February 27th, 2008 9:37 am

    Very good. I hope more people will use these ideas.

  48. 48
    Scott
    February 27th, 2008 4:44 pm

    Funny seeing the steven holl website on the list.
    The page is a great improvement from his last one but i think it could use larger letters.
    Also after you navigate away from the main page the navigation gets annoying in my opinion.

  49. 49
    Veera
    February 27th, 2008 11:36 pm

    Nice collection. Useful. Hope people will buy these ideas!

  50. 50
    Paolo
    February 28th, 2008 12:28 am

    this collection is useful to collect new ideas!
    thanks!

  51. 51
    maheshexp
    February 28th, 2008 12:55 am

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

  52. 52
    CubidoN
    February 28th, 2008 1:23 am

    Thanks, great posts!

  53. 53
    OverZero.it
    February 28th, 2008 2:18 am

    Outstanding.

  54. 54
    klauskinski
    February 28th, 2008 2:26 am

    wonderful portfolio of ideas … :)
    thx for that

  55. 55
    Social Browser
    February 28th, 2008 5:22 am

    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.

  56. 56
    Michael
    February 28th, 2008 7:35 am

    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.

  57. 57
    imaginepaolo
    February 28th, 2008 10:37 am

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

  58. 58
    Patsy
    February 28th, 2008 11:51 am

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

  59. 59
    webthese
    February 28th, 2008 5:40 pm

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

  60. 60
    Alistair Reid
    February 28th, 2008 10:46 pm

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

  61. 61
    Peer Wandiger - Selbständig im Netz
    February 28th, 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.

  62. 62
    sandeep
    February 29th, 2008 12:40 am

    Nice collection!

  63. 63
    dharma
    February 29th, 2008 2:35 am

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

  64. 64
    TOD
    February 29th, 2008 5:19 am

    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…

  65. 65
    Ralph
    February 29th, 2008 10:15 am

    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

  66. 66
    Webdesigner
    February 29th, 2008 10:18 am

    Awesome design tips! Thanks a lot!

  67. 67
    webunicorn
    March 1st, 2008 4:36 am

    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

  68. 68
    paul
    March 1st, 2008 7:37 am

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

  69. 69
    Nix
    March 2nd, 2008 7:11 pm

    Great collection :) I like them! Good work!

  70. 70
    Charlie Nielsen
    March 4th, 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

  71. 71
    john ozolett
    March 4th, 2008 3:15 am

    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.

  72. 72
    Dan
    March 5th, 2008 8:04 am

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

  73. 73
    Marc
    March 6th, 2008 6:41 am

    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?

  74. 74
    Felix
    March 6th, 2008 7:05 am

    really good list. Thanks!

  75. 75
    Martin
    March 6th, 2008 9:57 am

    Great collection ! Man thanks for another great post !

  76. 76
    Chris
    March 7th, 2008 7:46 am

    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…

  77. 77
    Steve Firth
    March 8th, 2008 3:24 pm

    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.

  78. 78
    Shobhit
    March 11th, 2008 8:46 am

    Real Gud ones..
    thanks a lot Smashing..

    u guys are real SMASHING…..

  79. 79
    Daniel
    March 15th, 2008 9:14 am

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

  80. 80
    Carla
    March 19th, 2008 8:40 am

    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.

  81. 81
    Randy
    March 25th, 2008 2:41 pm

    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.

  82. 82
    china girl
    April 1st, 2008 5:25 pm

    very good!thanks

  83. 83
    andol
    April 2nd, 2008 4:49 am

    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.

  84. 84
    ferd_randa
    April 2nd, 2008 7:10 pm

    they are are very good designers.. nice one!

  85. 85
    Secret Owl
    April 3rd, 2008 5:52 pm

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

  86. 86
    JC
    April 7th, 2008 10:08 pm

    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?

  87. 87
    Pandu
    April 11th, 2008 4:43 am

    Good study of navigation design.
    very good.

  88. 88
    Alexander
    April 12th, 2008 2:52 pm

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

  89. 89
    arjun
    April 16th, 2008 5:13 pm

    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?

  90. 90
    subac
    April 17th, 2008 1:27 am

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

  91. 91
    Jan Novak
    April 17th, 2008 12:22 pm

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

  92. 92
    Debabrata Ghosh
    April 29th, 2008 9:29 pm

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

  93. 93
    alexian
    May 4th, 2008 6:35 pm

    I love you more than i can do

  94. 94
    Grag
    May 19th, 2008 11:03 am

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

  95. 95
    snoopi
    May 27th, 2008 1:35 pm

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

  96. 96
    turizm
    June 4th, 2008 7:09 am

    thank you…

  97. 97
    otogaz
    June 11th, 2008 5:10 am

    thanks you

  98. 98
    asansör
    June 13th, 2008 12:31 am

    thank you wery much

  99. 99
    Gaby
    June 13th, 2008 7:17 am

    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!

  100. 100
    Rob
    June 17th, 2008 9:42 pm

    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.

  101. 101
    Arjun
    June 29th, 2008 11:10 am

    I never seen this kind of navigation menu!
    very very nice…
    thanks for it.

  102. 102
    pesimist
    July 29th, 2008 11:24 am

    buttons is very nice :D

  103. 103
    number 08
    August 8th, 2008 2:23 am

    Many thanks for sharing. i really needed some inspiration for navigation design so thanks!

  104. 104
    Marilyn
    August 25th, 2008 3:13 am

    This is such a wonderful article, thanks for all the examples you’ve provided. Some of them are really beautiful :)

    OVO Creatives

  105. 105
    Tammy Hart
    September 7th, 2008 8:06 am

    Doe anyone know of a way in WordPress to dynamically create a page list like what is shown in the first trend? I know I could use a custom field to create the subtitle, the problem is then listing it and the page title with a custom query.

  106. 106
    masterza
    September 22nd, 2008 7:49 pm

    excellent compilation of thanks

  107. 107
    Lever
    October 2nd, 2008 6:29 am

    That’s a really nice list, thank you :) It’s just a shame that the gotocss3.com site is no more – I really love that menu design and wanted to see more :(

  108. 108
    Vaishakh
    October 12th, 2008 9:12 pm

    it is realy great designs on this site…… this is very helpfull site for web designers…iam a web designer so i am very happy now ! thank you “SMASHINMAGAZINE”….

  109. 109
    Sadie
    November 23rd, 2008 7:48 pm

    Your screenshots are not showing.

  110. 110
    EMC
    November 26th, 2008 11:16 pm

    Very interesting subject

  111. 111
    andrew
    December 1st, 2008 3:33 am

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

    My experience exactly. Frightening really. And the bass throb made me too anxious to actually keep navigating further!

    As to this page as a whole with examples: a nice collection of work and helped with a little (well somewhat large) problem I had on a present project. Thanks for the effort in compiling all of these – must’ve taken quite some time! :)

  112. 112
    Ali TOPALOGLU
    January 2nd, 2009 3:17 am

    Cool collections, thanks.

  113. 113
    Kelly
    January 20th, 2009 11:33 pm

    Cool

  114. 114
    Relax
    January 21st, 2009 5:15 am

    This article is really amazing! Well structured and a true source of inspiration for every web design! I use it for my day to day design. Thanks!

  115. 115
    omar no sleep till brooklyn
    January 21st, 2009 9:43 pm

    This is truly exceptional inspiration and all around great work! Thank you so much for the work you put into this Smashing Magazine!

  116. 116
    Alan
    January 22nd, 2009 6:40 am

    Thanks for presenting this intriguing collection!

  117. 117
    andi candy
    January 22nd, 2009 10:25 pm

    i am so impressed with your site and all the collections your bring to this site. Thank you so much for inspiring me with your hard work.

  118. 118
    miln
    January 25th, 2009 7:36 pm

    another sample for the ‘creative / icon’ navigation. I think it works really well. intuitive.
    boxmodel.ca
    take a look.

  119. 119
    bolix
    February 10th, 2009 8:56 pm

    nice thanks!

  120. 120
    azad
    March 28th, 2009 9:21 am

    Cool Ideas. Great for inspiration. I visit this page everytime I design a navigation menu.

  121. 121
    Jofcar
    April 6th, 2009 5:47 am

    Hi there, does anyone know a good tutorial for speaking buttons navigation? I have tried it with only text and css but when going mouseover it won’t highlight the full button, only for example “home” and not the subtext.

    I have seen quite cool navigation menu’s but I good tutorial for such speaking navigation menu’s is hard to find…

  122. 122
    cahura
    June 2nd, 2009 4:29 pm

    This certainly is timely for. For a little while now, I had been on the look out for navigation inspiration – Viola, this turns up!

  123. 123
    veru
    June 12th, 2009 4:39 am

    Really nice collection! Thanks.

  124. 124
    Yogesh
    June 24th, 2009 10:28 pm

    This is excellent work..
    Thanks

  125. 125
    hansa
    June 26th, 2009 9:55 am

    Great list. Small typo in Polkdesign entry: calendear

  126. 126
    shohan
    July 19th, 2009 7:14 pm

    Really inspiring!

  127. 127
    Timo Lange
    September 22nd, 2009 11:29 pm

    i found a cool navigation on the webdesign portfolio from the berlin webdesigner michael seiler-gerstmann. amazing^^

  128. 128
    INVIVIA
    October 1st, 2009 8:36 pm

    Check out this cool navigation from INVIVIA
    http://www.microsoft.com/services

    Its a hybrid tab-breadcrumb navigation.

  129. 129
    Anton Agestam
    October 5th, 2009 12:27 pm

    This is a very interesting and useful article! I’ll bring to my next web design class!

  130. 130
    feha
    October 8th, 2009 6:33 am

    Here comes a Step by Step Menu
    http://www.vision.to/step-by-step-menu-a-wizard-lke-single-image.php

  131. 131
    aravind
    November 8th, 2009 9:03 pm

    Really very nice collection

  132. 132
    Extend Studio
    November 19th, 2009 3:34 am

    If you’re looking to generate JavaScript Menus from Dreamweaver.

  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