20 Inspiring Navigation Menus

By / Oct 24, 2011 / Inspiration
shares

Navigation is certainly a very important part of web design and an important aspect to think about while designing a page. Today we gathered a few examples of navigation menus to show you. From clean and simple typography based menus to colorful and fixed positioned ones, there are a lot of examples to inspire you.

In Motion

In Motion is using nice and colorful icons to navigate the page.

Inspiring Navigation Menus

zoo.

Fixed header with clean and elegant typography based menu.

Inspiring Navigation Menus

New Gotham

Another good example of effective typography based menu.

Inspiring Navigation Menus

Timberland

Drop down menu that ‘come and go’ as you need it.

Inspiring Navigation Menus
Inspiring Navigation Menus

Kenneth Cachia

Clean website with a minimalist and beautiful menu.

Inspiring Navigation Menus

sparks

A nice HTML5 website with a menu that allow you to drag the marker to navigate or simply click the options.

Inspiring Navigation Menus

New Citroen DS5

Another good example of hidden menu that you use it just when you need it.

Inspiring Navigation Menus
Inspiring Navigation Menus

Moment Skis

Nice and clean typography based menu. Hover it for some color effect.

Inspiring Navigation Menus

solo

Also a nice example of clean typographical menu with hover effects.

Inspiring Navigation Menus

Cameron Reynolds-Flatt

Beautiful HTML5 website with a typography based menu with hover effect. The website also have some pretty neat background transitions.

Inspiring Navigation Menus

Hermetik

Another example of a clean menu that you can hide and use it only when needed.

Inspiring Navigation Menus
Inspiring Navigation Menus

MAD

MAD is also using a menu that you can hide to have a better view of the page.

Inspiring Navigation Menus
Inspiring Navigation Menus

Carter Digital

A cool single page design with nice typographic based menu. Scroll down a little bit and the menu stays in a fixed position.

Inspiring Navigation Menus
Inspiring Navigation Menus

3Degrees Design Agency

Clean and elegant typographical menu with hover effects.

Inspiring Navigation Menus

divups

divups offers different options to please different users. You can scroll down to check the parallax scrolling effect, you can also choose the fixed header menu or the side menu.

Inspiring Navigation Menus

Chimp Chomp

Another beautiful example of typography based menu.

Inspiring Navigation Menus

Analog

Simple and colorful header menu.

Inspiring Navigation Menus

Pongathon

Nice colors and typography. Menu also has hover effects.

Inspiring Navigation Menus

inkling

Clean design with a minimalistic menu and a nice background animation.

Inspiring Navigation Menus

hering berlin

Beautiful minimalist design with super clean typography based menus.

Inspiring Navigation Menus

Source:

The Best Designs
unmatchedstyle
Awwwards

About the Author

Gisele Muller loves communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

20 Comments

  1. Jasim Muhammed
    October 24, 2011

    Wow Gr8 collections :)

    I like the New Citroen one with the “Parellelogram”. Its amazing.
    The MAD one too

    I have one site for recommentation which display good navigational menus
    http://uicart.com/gallery/ui/horizontal-navigation.htm

    Reply
  2. Thoriq
    October 24, 2011

    Great collection, I really like the Analog navigation. Simple, intuitive and colorful.

    I’ve also collected some of my navigation inspiration here: http://creatiface.com/web-design/e-commerce-website . You might also want to see it

    Reply
    • Thoriq
      October 24, 2011

      I think I’ve given the wrong URL. this is the right one http://creatiface.com/web-design/web-navigation . I’m sorry

      Reply
  3. Website Design Singapore – Morgan & Me Creative
    October 24, 2011

    They’re all so great, am finding trouble trying to pick out the best one!

    Reply
  4. aledesign.it
    October 24, 2011

    Wonderful collection! Really inspiration after see this! Thanks for sharing. I like design by MAD, and choice of colours by Carter Digital.

    Reply
  5. diseño zaragoza
    October 24, 2011

    Great stuff!, I really enjoy it with your recommendations. Thanks.

    Reply
  6. Elliott the web design guy
    October 24, 2011

    Nice examples, not so sure I understand Mad though? Why would you want to hide the menu, none of the pages benefit from hiding it :-S

    Reply
  7. adam
    October 24, 2011

    nice collection, always loved Citroen’s sites!

    The map on here (although flash) is very unique & fun http://www.citroen.com/

    Reply
  8. Darryl Snow
    October 24, 2011

    In Motion = goatse?

    Reply
    • Mave
      October 25, 2011

      I was thinking the exact same thing, Darryl. Unfortunate choice of imagery.

      Reply
  9. Muhammad Umair Khan
    October 25, 2011

    Hey thats awesome collection of navigation i like the MAD and Citroen.

    Please keep posting.

    Reply
  10. Toronto Web Development
    October 26, 2011

    The MAD navigation is silly fresh. Analog is really nice as well. The trick is to be unique without re-inventing the wheel, per say. You never want a navigation to be completely off the wall just for the sake of standing out. A nav’s primary purpose is functional. Unique aesthetics is a bonus (if you can pull it off tastefully).

    Reply
  11. IC Web Design
    October 27, 2011

    Sparks website concept of the turing heads is fantastic!

    Reply
  12. Saskatoon Web Design
    October 27, 2011

    The sparksonline.com menu has inspired me. To Photoshop I go!

    Reply
  13. Ashlie Webb
    November 3, 2011

    Great lot of examples here. I love all your collections. Thanks!

    Reply
  14. Web Design Florida
    November 7, 2011

    Nice example of website navigations, it shows the expertise of website designer. Nice post thanks for share

    Reply
  15. Mark Zip
    November 9, 2011

    How many of these work if you have scripting turned off?
    I stopped after the first 5. Sure, they look nice if you have scripting on, but I wish they degraded more gracefully than they do.
    Ans I didn’t ever *start* down the road of screen readers…

    Reply
    • Arnaud Tanielian
      November 26, 2011

      @Mark Zip : Try Citroën DS5, it’s a full JS non-obstrusive ;) Non-optimised, but works !

      Reply
  16. David
    November 28, 2011

    Like the MAD architecture menu – but not sure how functional that is …. then I suppose my Mum for example probably wouldn’t be looking at such a site ;-)

    Thanks,
    David

    Reply
  17. Tidy Design
    April 8, 2014

    A very nice collection – Great inspiration, thank you :)

    Reply

Leave a Reply