30 Examples of Excellent Website Navigation

Posted by Henry Jones on Jul 15, 2010 | 22 Comments

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.

22 comments

Donna Vitan
July 15, 2010
These are beautiful.
Reply
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
Arun
July 15, 2010
Very nice list ! thank you
Reply
Divyesh Ardeshana
July 15, 2010
It is really nice collection.
Ill use these ideas asap.

Thanks
Reply
asif aleem
July 15, 2010
just an awesome collection!
Reply
Sim0rn
July 15, 2010
Nice List! Very inspiring.
Reply
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
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
Greg Dougherty
July 15, 2010
These are some really great examples. Simplicity always wins!!!
Reply
Jordan Walker
July 15, 2010
Those are great examples of navigation.
Reply
Giulia Dente
July 15, 2010
Really nice collection! I like it!
Reply
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
Raelin
July 16, 2010
Neat , simple, easily understood: just what navigation should be about and just what the sites featured have.
Reply
Simon Hardware
July 18, 2010
Keeping it simple seems to be the way forward with most web design
Reply
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
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
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
Adlo
August 26, 2010
Very nice !!!!!
Reply
pete wilson
September 22, 2010
Absolutely beautiful and mega-useful. Thanks!
Reply
Chris
October 7, 2010
Great selection. Thanks!
Reply
lono
February 3, 2011
wow, lovely collection. inspiring stuff.
Reply
Lkenneth
May 2, 2011
awesome thanks!
Reply

Web Design Ledger

Related Posts

22 comments

Arun

Andy

Leave a Reply

Subscribe