Navigation Menus: Trends and Examples

Tagged:  

Over at Smashing Magazine they have posted a good article on navigation menu trends. The post does a good job of covering quite a few styles of navigation menus. I recommend this post if you are making a website or web application and are working on the navigation.

Below is an excerpt from the article.

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.

Screenshot

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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.

Screenshot

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.

Screenshot

Cobahair.co.uk uses only BIG typography…

Screenshot

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

Screenshot

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.

Screenshot

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

Screenshot

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

Screenshot

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.

Screenshot

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.

You can read the full post here.

I think it is always good to see what trends are going on in the web as it can give you good ideas for your own development. If you use any of the techniques in this post I would love to hear about them, you can either leave them in the comments or write a full blog post about them on this blog with your free Ajaxonomy account.

[...] Navigation Menus: Trends and Examples By David Hurth 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. Screenshot. Cobahair.co.uk uses only BIG typography… Screenshot … Ajaxonomy - The Study of Ajax… - http://www.ajaxonomy.com [...]

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.