30 Examples of Excellent Website Navigation

By / Jul 15, 2010 / Inspiration
shares

A website’s navigation allows visitors to get from page to page and discover content. That makes it pretty important, I would say. However, some designers feel the need to experiment and try to be clever with navigation design, but when getting around a website becomes a puzzle, visitors will more often leave frustrated. A website’s nav or menu should look like a nav. It should stand out while still matching the rest of the design, and it should be in a location where users expect it. So to give you some inspiration in this area, here are 30 Examples of Excellent Website Navigation.

The Idea Lists

website navigation

Collision

website navigation

Tobias Ahlin

website navigation

Carbonmade

website navigation

dConstruct 2010

website navigation

Jeroen Homan

website navigation

Brizk Design

website navigation

Dribbble

website navigation

Buffalo

website navigation

TedxToronto

website navigation

David A. Molanphy

website navigation

Fully Illustrated

website navigation

Live Books

website navigation

Rich Brown

website navigation

I Love Dust

website navigation

Blue Sky Resumes

website navigation

Soh Tanaka

website navigation

Kyle Myer

website navigation

Yaron Schoen

website navigation

Unconventional Guides

website navigation

HAUS

website navigation

Christopher Meeks

website navigation

Dan Wiersema

website navigation

Williamson County Casa

website navigation

Marie Catrib’s

website navigation

The Design Cubicle

website navigation

Exclusive Reels

website navigation

AFD Folio

website navigation

Veerle’s Blog

website navigation

Drexler

website navigation

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

23 Comments

  1. Donna Vitan
    July 15, 2010

    These are beautiful.

    Reply
  2. Warren Jerzyszek
    July 15, 2010

    Oh my god! this list is really great. I’ve had a look through most of them and I have discovered a pretty amazing site for both navigation and talent…fullyillustrated is a pretty mind blowing website. I wonder how he did the navigation, its obviously got to be some kind of jquery but which one?

    Reply
  3. Arun
    July 15, 2010

    Very nice list ! thank you

    Reply
  4. Divyesh Ardeshana
    July 15, 2010

    It is really nice collection.
    Ill use these ideas asap.

    Thanks

    Reply
  5. asif aleem
    July 15, 2010

    just an awesome collection!

    Reply
  6. Sim0rn
    July 15, 2010

    Nice List! Very inspiring.

    Reply
  7. Fredrik S
    July 15, 2010

    Don’t see what’s so excellent about it. It’s an average of three to four links. It doesn’t get interesting before you’ve got a complex navigation to solve in a neat way – if you find complex navigation situations that are EXCELLENT – that would be a truly excellent read! :)

    Thanks anyway.

    Reply
  8. Andy
    July 15, 2010

    hmm… the smattering i went through all seemed pretty obvious and by the numbers in execution to me. didn’t see anything particularly new.

    and if anything, i saw a few that would be totally let down when it comes to a touch based input system where there’s no hover (iPad etc). designers have to start contending for the fact that the cursor / hover navigation paradigm is shifting.

    Reply
  9. Greg Dougherty
    July 15, 2010

    These are some really great examples. Simplicity always wins!!! ;)

    Reply
  10. Jordan Walker
    July 15, 2010

    Those are great examples of navigation.

    Reply
  11. Giulia Dente
    July 15, 2010

    Really nice collection! I like it!

    Reply
  12. Kerem
    July 15, 2010

    I LOVE LOVE LOVE “The Idea Lists”. It’s fantastic. Nice round-up.

    I’m satisfied with my site’s navigation as well btw :)

    Reply
  13. Raelin
    July 16, 2010

    Neat , simple, easily understood: just what navigation should be about and just what the sites featured have.

    Reply
  14. Simon Hardware
    July 18, 2010

    Keeping it simple seems to be the way forward with most web design

    Reply
  15. ddeja
    July 19, 2010

    I wasn’t looking at all of them but…

    The “Idea Lists” – i think there’s a small defect on the drop down element. After clicking on it the cursos goes to default (i think it should stay as pointer).

    I like also Brizk Desing even though I don’t really like those one page sliding websites.

    And my favourite TedxToronto – clean, simple and beautiful font.

    Cheers.

    Reply
  16. Victoria Blount
    July 21, 2010

    The excellent navigation examples have several things in common which make them clear and easy to navigate, like the font size and colour and defined over state.

    Reply
  17. Rick Lecoat
    August 4, 2010

    Everyone seems very impressed with these navigation examples, and yes they do look lovely, but has anyone stress-tested them in any way beyond simply ooh-ing and ahh-ing at the pretty graphics? And by stress test I mean even the very basics?

    The very first two I looked at (Collision and Exclusive Reels) break as functional navigation with Images turned off. At least ER regains some usability if you turn off CSS (the text links become visible again as unstyled text); Collision, incredibly, doesn’t even provide for that eventuality, with empty links in its navigation markup.

    If web design is nothing more than making things pretty then, yes, these are excellent examples of navigation. If, on the other hand, you subscribe as I do to the notion that web design is *also* about ideas such as usability, accessibility and graceful degradation/progressive enhancement — rather than just catering to the highest common denominator — then both those sites get an F.

    Sorry to be blunt about it.

    Reply
  18. Adlo
    August 26, 2010

    Very nice !!!!!

    Reply
  19. pete wilson
    September 22, 2010

    Absolutely beautiful and mega-useful. Thanks!

    Reply
  20. Chris
    October 7, 2010

    Great selection. Thanks!

    Reply
  21. lono
    February 3, 2011

    wow, lovely collection. inspiring stuff.

    Reply
  22. Lkenneth
    May 2, 2011

    awesome thanks!

    Reply
  23. MindLogics
    April 10, 2014

    Really good examples of website navigation. Thanks for sharing such a good post and it’s very unique still in 2014

    Reply

Leave a Reply