Dec 26 2011

50 Interesting Navigation Menus

Advertisement

Navigation menus are a very important part of every website design. First and foremost, they help direct visitors to the main areas of your website, regardless of what page they are viewing on your website. They also point search engine robots in the right direction (though some flashy navigation menus aren’t that SEO friendly).

Today we would like to show you 50 beautiful navigation menus; ranging from simple ones that hide discretely at the corner of the design to full blown menus that take up most of the header. No matter what type of navigational menus you tend to favor, we hope that there is a little inspiration waiting for you in the designs below. Enjoy :)

Nicely Navigated

1. Alexarts

A great looking home page that has 4 large balloons as a navigation menu with each balloon floating up whenever a visitor hovers over it.

Alexarts

2. Blogger Bake Off

A traditional horizontal navigation menu that integrates with the website design beautifully.

Blogger Bake Off

3. Small Stone Recordings

One of the coolest navigation menus on the web. Each section of the site is featured as a dial or button in the recording unit at the top of the page.

Small Stone Recordings

4. Loodo

A good navigation menu that is based upon a traditional board game.

Loodo

5. Jeff Sarmiento

A colourful vertical navigation menu. The background colour and icon that is shown when a visitor hovers over a link is different for every page.

Jeff Sarmiento

6. Fabrica De Caricaturas

A great looking home page which features a navigation menu as labels at the left hand side of an A4 piece of paper.

Fabrica De Caricaturas

7. Genes Sausage Shop

At first glance it looks like a regular vertical menu but when you look closely you will see that the designer has made the menu resemble the ‘specials’ chalkboard like you would see in a butcher shop.

Genes Sausage Shop

8. Robin James Yu

The square bubbles that are placed around the navigation menu items are placed around the site in other areas. It’s a simple design but it fits in well with the site.

Robert James Yu

9. Polar Gold

A stylish flash horizontal navigation menu. Sleek and simple.

Polar Gold

10. Madison

A grungy style navigation menu that turns red when you hover over a link.

Madison

11. Tennessee Trains & Byways

Don’t let the discrete menu at the top of the page fool you; Tennessee Trains & Byways is in contention for the largest drop down menu in the world. :)

Tennessee Trains & Byways

12. Innovative Imaging Professionals

A colourful flash menu that lists the various site pages on top of a photo.

Innovative Imaging Professionals

13. Carsonified

A cool horizontal navigation menu that fits in well with the groovy Carsonified design.

Carsonified

14. Fantasy Cartography

A fantastic home page from old mapmaker Robin C. Kuprella. The areas of the site are linked directly on the home page map. Clicking on a link will change the content in the central content box.

Fantasy Cartography

15. Bully Entertainment

A great menu that features hand drawn icons for each section of the site.

Bully Entertainment

16. Indubitablee

Beautiful hover actions and well designed sketched icons makes Indubitablee a breeze to get around.

Iindubitablee

17. Power To The Poster

A practical design in which all menu items, and any links on the page, turn red when you hover over them.

Power To The Poster

18. Fundo Los Paltos

A good looking wooden style navigation menu that shows a leaf icon whenever you over a menu item.

Fundo Los Paltos

19. Yellow Bird Project

A simple but fun menu that integrates well with the cartoon design of the rest of the website.

Yellow Bird Project

20. Pure Grips

A good looking clean corporate style horizontal menu.

Pure Grips

21. Carbonica

A simple vertical menu that shows an arrow and drawn circle when you hover over the item. Strangely, not all menu items have this effect.

Carbonica

22. Chris Jennings

Colourful bookmarks are used as menu links at the top of a torn piece of paper in this cool looking vertical navigation menu.

Chris Jennings

23. Time For Cake

An elegant drop down navigation menu. Perfectly fits both the design and subject of the site.

Time For Cake

24. Amazee Labs

Another simple yet beautiful horizontal menu that we felt was worth taking note of.

Amazee Labs

25. Guga Fit

A cool navigation menu which changes the links from blue to green when you hover over them. Simple but effective.

Guga Fit

26. Ferocious Quarterly

A ribbon style menu that shows page links on different levels.

Ferocious Quarterly

27. USU Students Association

A great looking vertical navigation menu. Bold and attention grabbing for such a simple design.

USU Students Association

28. FA Design

A stylish menu that looks great over the full screen image changing background.

FA Design

29. Biola Undergrad

A basic horizontal navigation menu that works well with the colourful design of Biola Undergrad.

Biola Undergrad

30. C & C Coffee

A fun flash based menu that playfully dangles links from the top of the page.

C & C Coffee

31. Helmy Bern

An interesting menu that wraps the menu links around a torn piece of cardboard.

Helmy Bern

32. Crumpler

An image based navigation menu that features social media integration.

Crumpler

33. B & Q

Each category shows dozens of website links under it. It’s a great example of how you can still make a website with hundreds of pages easy to navigate.

B & Q

34. From The Couch

A simple vertical drop down menu that integrates well with the blog design.

From The Couch

35. Get Me Fast

Many of the graphics in the background are links in this fun header design.

Get Me Fast

36. Eye Bridge

A graphic based menu that shows a circle around the page text when you hover over it.

Eye Bridge

37. CampLuxe

A clean professional looking naivigation menu. An easy addition to the showcase.

CampLuxe

38. NickAd

Probably not the most practical menu available but certainly one of the coolest. The NickAd page remains mostly blank apart from a small logo at the top left and bottom right of the page. Your cursor changes into a star when viewing the page. If you click on the page a horizontal menu will appear that will let you navigate the site.

NickAd

39. Envira Media

A great looking eco-style vertical navigation menu.

Envira Media

40. XHTML Cafe

Another good example of an interactive home page. The top menu and and many elements of the home page design are all clickable.

XHTML Cafe

41. Design Bombs

A minimal design that integrates with the Design Bombs website look and feel perfectly.

Design Bombs

42. Paolo Cavanna

A unique navigation menu that is implemented on a cool one page design.

Paolo Cavanna

43. Surf Station

A minimal vertical navigation menu which increases the size and weight of the menu link selected.

Surf Station

44. Racket

An innovative navigation menu that fits in well with the website’s unique design.

Racket

45. CL Designz

A fantastic design that is unique, colourful, fun and practical…oh my.

CL Designz

46. Keith Cakes

A simple horizontal menu that uses beautiful calligraphy.

Keith Cakes

47. Carbon Made

The background colour of every page is different, however the colourful navigation menu remains the same.

Carbon Made

48. Manic Design

A scrolling vertical navigation menu that moves the cursor as you scroll down the page.

Manic Design

49. HydroHolistic

A fun horizontal menu that displays a descriptive pop up of each page when you hover over a link.

HydroHolistic

50. Space O Technologies

The cartoon font fits the cosmic style of Space O Technologies perfectly. This is a one page website so the menu colours change depending on what section you are looking at.

Space O Technologies

Thanks for checking out the various navigation menus we collected to feature for you. Hopefully you found a little inspiration along the way. What are some of your favorite solutions to site navigation? Feel free to leave us your thoughts below.

(rb)

About the Author

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity and Social Media on his personal blog. He can also be found on Twitter: @KevinMuldoon.

Homepage

Twitter Page

Comments and Discussions
  • AdrianMaftei, 26 December 2011

    Is a good collection of links that can inspire me in designing new layouts.

  • Vibhoo, 26 December 2011

    Awesome menu keep posting like this and than x. . .

  • Jon, 27 December 2011

    Definitely a great collection! Seeing Design Bombs makes me sad that sohtanaka is still offline :(

  • Kiran Patel, 27 December 2011

    Excellent suggestions of the different navigation style. Great inspiration.

  • Mike Mai, 27 December 2011

    the Manic Design one is pretty cool!

  • Stacy David Wallingford, 28 December 2011

    Fantastic collection of menus! These are great finds.

  • Spooler, 28 December 2011

    Great collection! A lot of new methods and beautiful menus. Thank you!

  • Geoff McMahen, 30 December 2011

    Very inspirational design work!

    Thanks for sharing!

  • Mike, 01 January 2012

    Not all of them are that great. If you have to make the user think about where to find your navigation you have failed and many of these fail that test.

    While clearly not as bad as the popular ‘mystery meat’ navigation styles from a few years ago, I think we still need to be clear about what we are primarily designing for – the user.

  • Paul Cameron, 04 January 2012

    Great collection, thanks for taking the time to research and gather all this stuff.

  • Marc, 04 January 2012

    Superb collection, a great mix of styles.

  • Federico Capoano, 18 January 2012

    Hellyeah, so happy to be here with one of my websites! :-)

  • Federico Capoano, 18 January 2012

    I guess there’s a chinese website which si copying your content:
    http://www.oschina.net/news/24682/interesting-navigation-menus

  • Selvaraj, 18 October 2012

    This is very nice and great collections wow…

  • Ashok Saini, 12 March 2013

    nice menu collection….thanks

  • Richie, 11 April 2013

    Some good ideas here. Thinking about rebuilding my website and having image icons to replace the vertical menu. It would be more eye-catching for the visitors

search form
 
image description image description