Guest Post by Joel Reyes

Web designers always have to strike a balance between usability and visual appeal when designing a website. Without this balance, a website might be nice to look at or difficult to navigate. Or, it might be easy to navigate, but not easy on the eyes. With this in mind, balancing attractive navigation with usability does not need to be overly difficult. To help you generate new ideas and inspiration for user navigation, here are 30 great examples of attractive and usable navigation.


This site features the simplicity of an attrractive menu that empowers users with undeniably easy to follow navigation. If you hover over the headline under the logo you will see that the word "Type" remains highlighted, and as you begin to hover over the rest of the words you’ll be able to clearly select the corresponding area you’d like to visit.



Links are in the form of icons that feature a neat effect that allows the icons to light up as you hover over them. It’s simple, subtle, attractive, yet effective.


The navigation on displays a unique approach to creative styled menus. All of the buttons are placed in a comment shaped figure and pop out as you hover over them.


Search Inside Video

The navigation on this site clearly directs you in the form of an arrow as you hover over them with your mouse. Effective navigation leaves behind complex design. Seems as though this site made use of this suggestion.



This site takes creative navigation to the sky. If you look to the left and mouseover the guy you will see a smile appear, if you mouseover the icons and images you’ll instantly see a description next to the mouse’s pointer as well.



Forty uses a creative, image-based user navigation. The arrows “guide” the users attention to the buttons and invites the user to click on them.



Healogix asks the four most important questions of itself with large text that draws the users attention. When, what, why and who? Can all be answered one click away from the homepage.


Ideas on Ideas

There is only one main link to the home page, but the idea is both creative and usable. The link is prominent and it “speaks” to the user. Users, in general, enjoy web pages that they can interact with.


Sarah Longnecker

The navigation of this website is simple and easy to use. The banners behind the selected page make the navigation easily identifiable from the rest of the page.


Made By Elephant

Made by Elephant features large and easy to use navigation. The blue text also adds a nice contrast to the heavier red and black.


Work at Play

As you begin to click through the menu of this site, you’ll be able to notice that the position of the background and color of the entire site quickly change.


Clear Left

The menu on this site resembles that of a post it note as you mouseover the links. Then entire layout of the site is based on this concept.


Pattern Tap

As soon as you enter the site you’re greeted by a green arrow that feeds you information about every section as you scroll through the site. This makes it easer for users to interact with the site.


Unstoppable Robot Ninja

The navigation is as bold as the name of this website. Furthermore, it also enhances the design tremendously.


Red Nose Day

The main navigation links fit in well with the playful theme of the website, while maintaining usability and prominence.


Polar Gold

This text-based navigation features a colorful and playful look while maintaining usability without the use of Javascript, but Flash instead.


Webpage FX Blog

A unique and interesting take on navigation. The links to the home page and blog are featured in a sentence across the header of the page. It does not violate usability principles, it is easy to read and highly effective.


Opera Ma-gé

The main navigation is easy to find, and the green underline creates uniformity between the navigation and the rest of the page.



Owltastic is a perfect example of good user experience. Every element of the main navigation animates when the user hovers the mouse over it. Like other examples on this list, the navigation is also prominent and easy to locate.


Guillaume Pacheco

Like Owltastic, this website interacts with the user as they mouse over different elements of the page. The site is well laid out and easy to navigate.


Full Cream Milk

Full Cream Milk uses a distinct text-based navigation, as you roll over the links, a portion of the top of the page is highlighted. This is a great example of navigation that is pleasing to both users and search engines.


Arca Lui Noe Hotel

This site features user navigation that is both beautiful and easy to use. It is very stylish and adds to the overall design of the page.


Sushi & Robots

Sushi and Robots uses elegant Typography to create a beautiful and attractive navigation that stands out.



Sharify features a monochromatic user navigation that is pleasing to the eye, and usable because of the contrast between the white text and the sky blue background.


Stephen Caver

Here, the navigation is essentially the first content you see on the home page. It is “clean” and easy to use. Moreover, the use of whitespace in the navigation is excellent.


Thought and Theory

This site takes a minimalist approach to navigation, and it simply works. It does not take anything away from the page or distract the user.


Slightly More

Again, the high contrast black and white adds to the usability of the site. The javascript rollovers are light blue tabs that add interactivity and aesthetic value.


Ulster Grocer

The navigation makes use of bright colors, easy accessibility and unity with the blue background of the main content of the page.



The Adaptd site features creative, easy to follow, and beautiful navigation. The aspect of this navigation that stands out the most is located in the section where the portfolio resides. When you place the mouseover these buttons the words become transparent blend in with the sites background.


Sac Jazz Festival 2009

This site has navigation that the user does not even have to search for. In addition, the vibrant color of the navigation adds even more color to the page. The elements of this design blend together seamlessly.



May 25, 2009 at 11:46 pm

Great post! Really good collection of websites. I love seeing a good list of well designed websites.

May 26, 2009 at 12:06 am

Amazing list, some really good sites.

May 26, 2009 at 12:12 am

Words will fall short………..

May 26, 2009 at 12:21 am

Nice roundup. Love how configure their navigation.

May 26, 2009 at 1:12 am

excellent collocation dude.. I’m always looking for this kind of inspirational things to design unique

May 26, 2009 at 1:18 am


What else can I comment? All of them are exceptionally beautiful websites. Apprasing each of them one by one will take a lot of time and just add bloat to my comment.

May 26, 2009 at 2:55 am

These are some really nice websites, each unique in its own way, one that stands out is to me is Work at Play.

May 26, 2009 at 3:51 am

interesting list again. thx

Phillip Smart
May 26, 2009 at 4:18 am

I’ve just started making my first site and wow, all this just seems miles away.

Great stuff, love the inspiration, keep it coming.

DKumar M.
May 26, 2009 at 5:11 am

Nice collection nick…. thanks for sharing !!

DKumar M.

May 26, 2009 at 6:53 am

its all Great.
My fav:

Benjamin Reid
May 26, 2009 at 7:04 am

If it looks good and it’s still user friendly then they get a tick in my book.

May 26, 2009 at 7:09 am

great list, will add this to my favs.

May 26, 2009 at 7:10 am

I feel it’s easier to create usable, attractive navigation when you’re asking people to view just four sections, or just four pages. It’s much harder when you’re site has a lot of *content* and requires drop-down menus.

Altitude Marketing
May 26, 2009 at 7:16 am

Thanks for featuring one of our latest projects, Healogix. Much appreciated!
Some really great stuff in this list. :)

May 26, 2009 at 7:45 am

I always thought that was an extremely beautiful website, it stands out in this awesome list of awesomeness :D

David Costales
May 26, 2009 at 8:03 am

Nice list, thanks!

May 26, 2009 at 8:37 am

Greatings from Hannover, Germany.
Thanks for inspiration.

May 26, 2009 at 8:42 am

Thats a really nice list thanks. It seams to be so easy for web designers to fall into the trap of using the same or similar navigation on every site they make. I agree with Wedge about larger sites with drop downs but it’s easy to forget how creative you can get with navigation on smaller sites without compromising the usability.

Brian Cray
May 26, 2009 at 10:20 am

Very cool roundup.

May 26, 2009 at 11:26 am

thank (^_______^)

May 26, 2009 at 2:10 pm

This post makes me wanna scrap all my websites and start from scratch. Very cool and inspiration navs and sites in general.

Radoslav Holan
May 26, 2009 at 5:43 pm

It shows again there are really no borders. Something is more useful, something is more hot. But anyway, it’s again a nice post in here, useful and inspirative. Thanx

Julian Young
May 27, 2009 at 4:55 am

Lovely compilation, nice mix alhough some are clearly not very attractive! :) Thanks!

Creamy CSS
May 27, 2009 at 5:07 am

Nice list,.. Made By Elephant navigation menu is great!

May 27, 2009 at 6:45 am

Some are really cool and others not so… beauty is in the eye of the beholder! Thanks for sharing.

Michael Armsatti
May 27, 2009 at 7:52 am

About time you posted something good again, this site was going to crap and boring

Dario Gutierrez
May 27, 2009 at 10:51 am

Some sites are great but others not.

Jesse Korzan
May 27, 2009 at 11:54 am

Thanks for including our site!

Joel R.
May 27, 2009 at 2:53 pm

Thank you for your comments!

May 27, 2009 at 10:15 pm

your posts inspire me to be a web designer! thanks

May 28, 2009 at 1:42 am

nice compilation, thanks for the post

Adam Akers
May 28, 2009 at 3:25 am

Another great list of examples. Another list to be bookmarked into my favourites
May 28, 2009 at 6:39 am

Another fabulous post! Arca Lui Noe Hotel, Guillaume Pacheco, Typographica are my preferite. Is important to see a different NAV in the net..every graphic have a lot fo idea after see this post!

May 28, 2009 at 8:55 am

great article as always, thanks for sharing!!

May 28, 2009 at 9:59 am

hi, it always a pleasure to visit ur website. it gives me a great deal of information on what is going on in the design world as i dont get much information regarding global webdesign trends in my country india. but i was wondering on what basis do u search for these websites and how would u decide on which one to showcase when each other website would have its own speciality?

May 28, 2009 at 11:02 am

great bunch of collection,
thanks a lot bro

May 28, 2009 at 4:48 pm

There are some really nice websites there, it’s cool to see (don’t know if it’s a trend) moving backgrounds and slides.

As always thanks for sharing…


Sklep Zoologiczny
May 28, 2009 at 6:07 pm

Simply genius !

May 28, 2009 at 7:28 pm

Beautiful list. I am always looking for good inspirational design examples to help me along in my journey.

Egypt Web Design
May 28, 2009 at 11:30 pm

Woww Thanks for all your efforts, it’s defiantly an added value for all the designers and a good way to show appreciation for the hard worker designers :-)


May 29, 2009 at 1:35 am


webdesign - bevisual
May 29, 2009 at 10:26 am

Thank you for this very nice List!

May 29, 2009 at 11:23 pm

Thank you for all the inspirations!

- Toby -
May 30, 2009 at 2:25 am

Thanks Nick! Nice Inspiration!

May 30, 2009 at 8:16 pm

Great selection :), you can also check navigation bar at my portfolio as well…

May 31, 2009 at 3:33 am

great collection. thx

Jun 1, 2009 at 11:48 pm

Great inspiration for me… thanks a lot…

Jun 2, 2009 at 6:01 am

keep up the good work

Jason Grant
Jun 2, 2009 at 4:00 pm

Very nice stuff.

Design is a very important aspect of any web site and navigation can be one of the hardest things to get right and make it pretty.

Simon Erich
Jun 2, 2009 at 5:27 pm

I have mixed emotions when looking at a list like this. Attractive – Yes. Effective – Mostly. But these are some very limited views on what “navigation” really is. Are we talking about the 4-6 links at the top of a homepage? Or are we talking about how to make a deep, content rich site easy to use for the visitor? There are some very nicely designed sites in this list, but many which “break the rules” of standardization of navigation and labeling.
All that being said, thanks for putting together this attractive and inspirational list! I’m sure it won’t be the last time I visit, keep up the good work.

Jun 2, 2009 at 6:25 pm

I agree with Simon Enrich. The sites are attractive and it is great to see so many talented designers on the web. Unfortunately, some of the sites from this list will be frustrating, confusing or even impossible to use for a keyboard user. In most cases this problem could be fixed by simply using device independent JavaScript handlers. Sites should be attractive but they are not paintings in a gallery or printed brochures – we should be able to get beyond the home page, with or without the mouse (e.g. mobile phone).

Jun 3, 2009 at 12:06 am


Jun 3, 2009 at 11:26 am


Jun 5, 2009 at 3:56 pm

Ewww, number 4 uses sIFR.

Web Design Hobart
Jun 5, 2009 at 6:24 pm

I like the custom layouts the most where the navigation is enhanced with creative hover texts. All navigation here seem to keep usability in mind as well and that is very important.

Fred Campbell
Jun 7, 2009 at 6:00 am

What a great list! Plenty of great website designs to plunder for inspiration! Thanks

Jun 9, 2009 at 3:53 am

Gr8 Collection !!!! The most important function of a website is to be very attractive and easy navigation , user friendly and communicative.

Carl - Web Courses Bangkok Instructor
Jun 10, 2009 at 4:03 am

Great examples thank you!

Jun 10, 2009 at 7:10 pm

I love these examples!
Thank you!

Jun 11, 2009 at 4:47 am

Very Informative, inspiring…..

burak - delizade
Jun 11, 2009 at 5:19 pm

bunch of great sites…gatheing them is a holy effort. thankyou

Pavel Kuts
Jun 15, 2009 at 7:11 am

nice owly site. made browse through more than the rest :)

Jun 16, 2009 at 10:21 pm

Most of these sites have less than 10 links/pages. It would be nice to see something more than just artist portfolio sites. Solutions for huge, data-rich sites would be interesting… this stuff is (mostly) pretty, but not exactly inspiring.

Jun 17, 2009 at 1:11 pm

It would be nice to see something more than just artist portfolio sites. thanks

Nicolas Borda
Jun 20, 2009 at 3:42 pm

Nice to see a Drupal site like Red Nose Day in the list!

Jun 23, 2009 at 2:29 am

still learning so much about websites. not a designer but need to know this info for my clients. thanks for the lesson.

Attitude Design | Graphic Design Portfolio
Jun 23, 2009 at 10:09 am

Thanks for this great selection.

Jun 25, 2009 at 12:37 pm

(comment removed by admin)

Jun 25, 2009 at 10:21 pm

Fantastic!! Thanks for posting these examples of awesome navigation! I’ll admit, it can be real exciting adding different design touches to the navigation!

I tend to design the navigation based on the style of my website. For elegant designs, I tend to use subdued text for links or maybe a subtle roll-over. The hotel website listed above is definitely an elegant type of roll-over!

I think it’s probably important to note that when doing roll-overs, image based roll-overs should be done with CSS instead of JavaScript. The JavaScript is a bit clunky and CSS just makes it a little cleaner. Just my personal opinion!

:) Rob

Jun 25, 2009 at 10:24 pm

@ Joe…I don’t think your rude behavior is appreciated by anyone in this forum. I would automatically delete your outcast behavior, and so should the designer of this website.

There’s no need for your attitude. Take it somewhere else!!!

Bernard Teske
Jul 1, 2009 at 7:46 am

In this webside, you can use the navigation in the left side or use the cursor like a “hand-tool”. Think this is also an interesting way :-)

Jul 3, 2009 at 2:17 pm

Your site and your content to a really great hand healthy;)

Jul 6, 2009 at 1:51 pm

Thank you my friend …

egypt web design
Jul 7, 2009 at 6:43 am

great article thanks for share with us, really great list.

London web design
Jul 11, 2009 at 12:57 pm

Yeah this is well nice!

Nashville Web Design Guy
Jul 15, 2009 at 2:31 pm

Very diverse range of styles and functionality on the list. Very nice compilation. I tend to lean toward linear navigation if it can fit at all into a project. I like to lead people through the experience. It’s not always feasible of course but a nice change for users and it allows you to gauge interest pretty easily via analytics.

Jessie Matanky
Jul 28, 2009 at 11:09 am

I really liked these- these sites seem to be up on all the blogs & web design sites for all sorts of different stuff. They should be proud.

Aug 3, 2009 at 2:22 pm

this site rocks for a post like this :D

Stephen Kui
Aug 7, 2009 at 12:57 am

I really love some of these navigation examples.
Just one thing I’ve found and noticed is no matter how good a navigation system looks, if it’s not easy to figure out, it doesn’t work for me.
So when I design I always make a habit of trying to keep the navigation stylish and different without making it totally confusing. (if you want to see what I mean it’s on my site at

Does anyone get what I’m saying or even agree?

Aug 8, 2009 at 5:57 am

these are awesome!
thanks for putting in the effort to get this list together

Clinton Montague
Aug 14, 2009 at 2:53 pm

@chris – it’s nice to know that some people look at it! Thanks for the kind words!

free style
Aug 21, 2009 at 10:43 pm

oh more attractive…

Cookie Creative - Graphic Design Manchester
Aug 25, 2009 at 5:23 pm

Wicked collection, thanks. :)

Sep 4, 2009 at 4:16 am

Atebits is cool design. Really interesting things here.

Sep 8, 2009 at 1:48 pm

I LOVE the “Work at Play” Site. Awesome example of creative navigation. I’m curious how they did it. Is it as simple as anchored links with a sticky header & footer? Or is there more to it? Hopefully this doesn’t sound too much like a newbie question.

Although…. it would make for a really cool tutorial. Hint, hint :-)

Sep 10, 2009 at 8:12 pm

Be sure and check out the page source for the Slightly More site

Sep 13, 2009 at 4:13 pm

Some of them are really nice.
However, some of them seems with a bad usability :(

Nice article anyways.

Oct 25, 2009 at 6:36 pm

Some great examples there. Great post.

Oct 31, 2009 at 5:18 am

I really love some of these navigation examples.

panel radyatör
Nov 5, 2009 at 8:48 am

good tutorial thanks

egypt web design
Nov 8, 2009 at 7:07 am

thanks for the nice collection

Discount Mole
Nov 12, 2009 at 1:53 pm

some amazing designs so jealous :()

panel radyatör
Dec 15, 2009 at 8:16 am

nice tutorial i will translate my language

Jan 4, 2010 at 7:27 pm

another great 2010 incrasing webtrend is the horizontal scroll, keep this example using jquery:

Jan 6, 2010 at 1:55 am


zonguldak halı yıkama
Mar 2, 2010 at 4:42 pm

excellent article i learn so thşngs

Mar 19, 2010 at 10:30 am

lovely designs ….great job

Mar 19, 2010 at 10:32 am

exceptional stuff.keep up the good work

Mar 24, 2010 at 1:25 pm

amazing article…

Michael Müller
Apr 9, 2010 at 8:52 am

How do you find this site

Apr 9, 2010 at 3:21 pm

Nice! This gives me some good ideas

Web Design
Apr 28, 2010 at 9:16 pm

I LOVE THIS SITE!! thank you for sharing

London Web Designer Evan Skuthorpe
May 25, 2010 at 11:10 am

some inspiring design examples here… bu not quite what im looking for… must keep looking.

Sep 8, 2010 at 4:04 am

hi frnd..great collection ..really helpful..and handy thanks ..

would u plz help me telling how to design these websites using visual studio..or at least u cud give me some tips..on the links i should view in order to master these design courses..

Sep 24, 2010 at 4:06 am

A well-designed website has many things like creative graphics, interactive animations, powerful navigation structure, and of course relevant content. But apart from all that, navigation plays very important role for any website. Navigation should be clearly defined and easy to understand for any visitor. So that visitors we go to any part of the website without any difficulties.

Web Design LA

Web development Cambridge Ontrio
Sep 24, 2010 at 6:08 am

i think its a perfect solution.

Rex Liu
Sep 27, 2010 at 5:16 pm

Would you be willing to give your recommendations for the Internet Marketing Services company I currently work for? Any advice would be much appreciated. Thank you in advance

Souvenir Berlin
Oct 11, 2010 at 5:25 pm

nice ideas and collection thx

Dec 1, 2010 at 12:40 am

When you do article marketing, your intention is to increase the number of visitors to your website. It is not our abilities that show what we truly are, it is our choices. I have look for such a article for a long

Dec 2, 2010 at 12:27 am

When you do article marketing, your intention is to increase the number of visitors to your website. You can do this by writing and submitting unique, quality

Dec 10, 2010 at 7:48 pm

part of the website without any difficulties. uggs outlet

Henry Peise
Dec 23, 2010 at 11:40 pm

The modern and delicate makes iphone 4 white so charming that even me, want to own one. But what i can do now, is to wait the price to decline.

Juno Mindoes
Dec 24, 2010 at 10:46 pm

Still wonder white iphone 4 avaiable or not? We tells you the answer is "yes". Now you can buy the hottest white iphone 4 Conversion Kit and make a change!

Jan 12, 2011 at 7:00 am

It is one of the best site i never seen.

Jan 13, 2011 at 4:57 am

Just saying thanks will not just be enough, for the exceptional lucidity in your writing.

Jan 18, 2011 at 1:29 am

Thanks for sharing your experience with us…
Facebook Applications Development
please keep posting your reviews….

altın çilek
Feb 2, 2011 at 6:08 am

That’s Great! Thanks for the post!

hcg damla
Feb 2, 2011 at 1:25 pm

When you do article marketing, your intention is to increase the number of visitors to your website. You can do this by writing and submitting unique, quality

Heather Williams
Feb 23, 2011 at 3:03 pm

I really love your site. Great sharing on the 30 WP sites and attractive nav. Superp work!

how to put on a condom
Mar 17, 2011 at 2:54 am

Exceptional post, buy can you right more about this? It is currently my field of study and I would be thanful for more information.

Caputo Designz
Jun 15, 2011 at 10:37 am

I love the list of navs! If anyone wants to check out a 100% free and pure css navigation with rounded corner drop downs go to :

thermal vision monocular
Jun 21, 2011 at 2:09 am

Thanks for every other informative web site. The place else may I get that kind of information written in such an ideal method? I have a undertaking that I’m simply now operating on, and I have been at the look out for such info.

Aug 23, 2011 at 11:17 am

And then he handed you the thirty-five 45

Sep 12, 2011 at 3:14 am

I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz respond as I’m looking to create my own blog and would like to find out where u got this from. thanks a lot

Sep 17, 2011 at 1:57 am

goddd u really suck

Sep 26, 2011 at 5:42 am

Awesome list, thanks for the share.. Love the site !

Commedia Courses
Jan 22, 2012 at 6:41 pm

Good stuff and good inspirational works!

Article Marketing Italia
Feb 5, 2012 at 1:40 pm

I love the Leihu template, It’s really a nice wordpress template!

agenzia seo
May 4, 2012 at 5:30 pm

Arca Lui Noe Hotel is great and attractive template! Really cool!

May 5, 2012 at 11:03 am

Thanks for making these novel web design ideas available together. I liked Ideas On Ideas and Polar Gold.

Free Logo Design
Jun 1, 2012 at 12:19 pm

I agree with you that navigation has significant importance. As far as the home page is concerned, it should be accessible and convenient.

Permade Free Logo
Jun 4, 2012 at 5:24 am

Its great and amazing collections of designing of web site.

Free Vactor Download
Jun 4, 2012 at 11:50 am

Its a great and very very easy websites to using .

Permade Free Logos
Jun 4, 2012 at 12:23 pm

I really like the unstoppable robot ninja.. All examples are fascinating.

Jun 4, 2012 at 4:47 pm

Sac Jazz Festival 2009 is great for music blog

Jun 7, 2012 at 6:31 am


Jul 11, 2012 at 12:48 pm

I think responsive navigation is the best way to go so no matter what device your visitor is on the navigation will look good. So one visitor could be on an iPod, one on a widescreen desktop computer, one on a laptop and one even looking at a big projector screen and they will all have a nice experience. Here are some great nav bars with and without a drop-down menu, and semi-transparent nav bars that will match any webpage background colour or design.


May 30, 2013 at 9:21 am

excellent post, I loved ..

Jun 1, 2013 at 6:06 am

i really like your collection
this blog is very useful for me
thanks for sharing

Post Comment or Questions

Your email address will not be published. Required fields are marked *