Total Followers 132,503
Navigation is one of those things you have to get right in order to provide your users with easy access to your website’s content. Today we’ll take a look at 30 well-designed navigation menus. Some of them use CSS sprites, some use jQuery or another library, and others take advantage of the great properties available in CSS3.
I hope you will enjoy this post. Please feel free to chime in by leaving a comment at the end of this post as well!
Get The Only Freelancer crash course you will ever need to read!
Tom Walker is a writer and designer who is based in the UK and works for a supplier of HP laser toner cartridges as well as inks, paper and other printing accessories. For more of his writing about art, design and technology, check out CreativeCloud.
Tuesday, August 16th, 2011 15:30
What a beautiful work of love! Thank you for using your talents for the Glory of God. And dont get discouraged with the negative comments. Pray for them that they may connect with the Truth of how much God Loves Them.God Bless You.
Thursday, May 19th, 2011 11:47
Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; many of us have created some nice practices and we are looking to exchange strategies with others, why not shoot me an email if interested.
Thursday, May 19th, 2011 13:09
We do experience spam everyday, but Akismet does the trick. :P
Wednesday, March 9th, 2011 03:23
Great examples, really inspirational. Got a new site I need to get done for a client and I’m definitely going to take a look at this stuff again to see if I can adapt some of it!
Sunday, February 20th, 2011 07:55
Excelent !!! great!!
Saturday, January 23rd, 2010 17:27
It is good that you emphasized here the importance of the navigation since some of the designer did not pay attention about the usefulness of this. Let me share this post to some of my web designer friends.:)
Friday, January 22nd, 2010 11:35
Someone please slap Rainsong with the progressive enhancement stick – their main nav has no hover effect when JS is off – slightly petty I know, but I know at least 10 ppl who browse without JS on (and not all of them are web developers etc.)
Thursday, January 21st, 2010 16:38
These are awesome. I love the pixlogix menu.
Thursday, January 21st, 2010 02:21
Not sure why these are “Cutting Edge”?
Most of the navigations listed in this post are used by many websites, making them pretty ordinary, most using CSS instead of the old fashioned Image Roll-overs.
Maybe #24 is quite original, looks good and works well, but there must be better examples of “Cutting Edge” CSS Nav designs out there?
Thursday, January 21st, 2010 03:34
Like some others, I’m not sure about “cutting edge” navigation, but there are so great examples here (I have collection of sites with good menus for inspiration, and several of them are in your list too).
But clockwork.net ??? sorry, but it does nothing for me, and requires a lot of fishing around with the mouse at times as not all links are obvious.
Thursday, January 21st, 2010 20:11
dr john,
You make a valid point about some of our links not being obvious enough; we’re taking a look at that.
Thanks for the feedback!
Wednesday, January 20th, 2010 14:57
Great collection :-)
Wednesday, January 20th, 2010 20:57
those are great rounds of beautiful desings.. i definitely can’t get enough of them. thanks for sharing!
Wednesday, January 20th, 2010 06:01
Nice compilation. I really liked 7, 15, 21, 26 and 29.
Tuesday, January 19th, 2010 21:55
This is great man! 1st Web Designer is one of my favorite blogs, and rightfully so with these kinds of articles. CSS navigation menus aren’t easy to come by on the web, especially of this high quality
Tuesday, January 19th, 2010 20:50
Awesome Header ” Pixlogix”. But for overall design my vote goes to “clearleft”. Very Neat Design… Thanks for the Awesome Web Site Collection.
Tuesday, January 19th, 2010 18:19
Hi Tom,
Great post, I especially like the Media Temple menu. Keep up the good work.
Tuesday, January 19th, 2010 13:50
Nice beautiful post Tom. Very good collection. Luv Pixelresort navigation, clearleft is equally good. Appreciate your efforts in putting this together.
-Deepu
Tuesday, January 19th, 2010 19:02
Nice collection. Thanks for posting.
I think #19 – 3.7 Design’s – navigation is pretty innovative.
Tuesday, January 19th, 2010 14:11
Thank you for good collection Tom but i have to mention one important thing to Dainis….
Hi Dainis;
Sorry to say that but your blog is becoming only showcases of sites and blogs by your guest writers day by day..
Tuesday, January 19th, 2010 16:36
@Danny: No offence but 6 out of the 10 last articles are from Dainis. No?
Great post. Lots of great websites. A lot of them I didn’t know. Thanks!
Tuesday, January 19th, 2010 16:51
@Mike van Hoenselaar
No defence:) but i didn’t say anything about the latest Dainis Articles.
Dainis is doing fine and if you read his articles they are all great but please just check out the other pages
bla bla designs,bla bla websites,showcase of bla bla websites:))
Anyway no need to break hearts:)..Keep on going guys
Tuesday, January 19th, 2010 18:27
Oh, I understand your complains, but now site is getting a bunch new guest writers and to get started I try to suggest them easier article ideas, that’s why there is so much inspirational, showcase articles lately.
However I am now focusing to more articles, I want them to come out daily. I cannot sustain that article quality daily, so I need guest writers, to relieve me a little bit.
I am hoping on future there will be more quality articles coming out and often! Some can complain that there is no need to write so often, but I think if I want to have any chances with top niche design blogs, I need to grow quantity and quality.
Please be patient, you will be rewarded with quality! And thank you for your comment and support! Appreciated!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-webdesignvideocoursepart3.jpg "Basic Web Design Video Course – Complete HTML Markup & CSS Styles [Part 3]")
![Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]](http://www.1stwebdesigner.com/wp-content/uploads/2013/03/preview-small-basicwebdesignvideocoursepart2.jpg "Basic Web Design Video Course – Basic HTML Tags, Structure & CSS [Part 2]")
Danny
Tuesday, January 19th, 2010 14:11
Thank you for good collection Tom but i have to mention one important thing to Dainis….
Hi Dainis;
Sorry to say that but your blog is becoming only showcases of sites and blogs by your guest writers day by day..
Mike van Hoenselaar
Tuesday, January 19th, 2010 16:36
@Danny: No offence but 6 out of the 10 last articles are from Dainis. No?
Great post. Lots of great websites. A lot of them I didn’t know. Thanks!
Danny
Tuesday, January 19th, 2010 16:51
@Mike van Hoenselaar
No defence:) but i didn’t say anything about the latest Dainis Articles.
Dainis is doing fine and if you read his articles they are all great but please just check out the other pages
bla bla designs,bla bla websites,showcase of bla bla websites:))
Anyway no need to break hearts:)..Keep on going guys
Dainis Graveris
Tuesday, January 19th, 2010 18:27
Oh, I understand your complains, but now site is getting a bunch new guest writers and to get started I try to suggest them easier article ideas, that’s why there is so much inspirational, showcase articles lately.
However I am now focusing to more articles, I want them to come out daily. I cannot sustain that article quality daily, so I need guest writers, to relieve me a little bit.
I am hoping on future there will be more quality articles coming out and often! Some can complain that there is no need to write so often, but I think if I want to have any chances with top niche design blogs, I need to grow quantity and quality.
Please be patient, you will be rewarded with quality! And thank you for your comment and support! Appreciated!
mavericdesign.com
Tuesday, January 19th, 2010 18:19
Hi Tom,
Great post, I especially like the Media Temple menu. Keep up the good work.
Web4half
Tuesday, January 19th, 2010 20:50
Awesome Header ” Pixlogix”. But for overall design my vote goes to “clearleft”. Very Neat Design… Thanks for the Awesome Web Site Collection.
Anna
Wednesday, January 20th, 2010 06:01
Nice compilation. I really liked 7, 15, 21, 26 and 29.
Inside the Webb
Tuesday, January 19th, 2010 21:55
This is great man! 1st Web Designer is one of my favorite blogs, and rightfully so with these kinds of articles. CSS navigation menus aren’t easy to come by on the web, especially of this high quality
SmashingWebs.com
Tuesday, January 19th, 2010 16:38
Ya.. this is something awesome :)
Matthew Heidenreich
Tuesday, January 19th, 2010 23:21
great complication, thanks for the list.
Deepu Balan
Tuesday, January 19th, 2010 13:50
Nice beautiful post Tom. Very good collection. Luv Pixelresort navigation, clearleft is equally good. Appreciate your efforts in putting this together.
-Deepu
M.R.
Tuesday, January 19th, 2010 19:02
Nice collection. Thanks for posting.
I think #19 – 3.7 Design’s – navigation is pretty innovative.
dimaks
Wednesday, January 20th, 2010 20:57
those are great rounds of beautiful desings.. i definitely can’t get enough of them. thanks for sharing!
Tutorijali HDonWEB
Wednesday, January 20th, 2010 14:57
Great collection :-)
Rafael
Sunday, February 20th, 2011 07:55
Excelent !!! great!!
Harry
Wednesday, March 9th, 2011 03:23
Great examples, really inspirational. Got a new site I need to get done for a client and I’m definitely going to take a look at this stuff again to see if I can adapt some of it!
Christian Mungle
Thursday, May 19th, 2011 11:47
Do you have a spam issue on this site; I also am a blogger, and I was curious about your situation; many of us have created some nice practices and we are looking to exchange strategies with others, why not shoot me an email if interested.
Rean John Uehara
Thursday, May 19th, 2011 13:09
We do experience spam everyday, but Akismet does the trick. :P
Charla Strough
Tuesday, August 16th, 2011 15:30
What a beautiful work of love! Thank you for using your talents for the Glory of God. And dont get discouraged with the negative comments. Pray for them that they may connect with the Truth of how much God Loves Them.God Bless You.
nikhil
Friday, January 29th, 2010 11:21
I love the collection… thankx for sharing.
Rachelle Galang
Saturday, January 23rd, 2010 17:27
It is good that you emphasized here the importance of the navigation since some of the designer did not pay attention about the usefulness of this. Let me share this post to some of my web designer friends.:)
dr john
Thursday, January 21st, 2010 03:34
Like some others, I’m not sure about “cutting edge” navigation, but there are so great examples here (I have collection of sites with good menus for inspiration, and several of them are in your list too).
But clockwork.net ??? sorry, but it does nothing for me, and requires a lot of fishing around with the mouse at times as not all links are obvious.
Meghan Wilker
Thursday, January 21st, 2010 20:11
dr john,
You make a valid point about some of our links not being obvious enough; we’re taking a look at that.
Thanks for the feedback!
Liam
Thursday, January 21st, 2010 02:21
Not sure why these are “Cutting Edge”?
Most of the navigations listed in this post are used by many websites, making them pretty ordinary, most using CSS instead of the old fashioned Image Roll-overs.
Maybe #24 is quite original, looks good and works well, but there must be better examples of “Cutting Edge” CSS Nav designs out there?
Jonathan
Friday, January 22nd, 2010 11:35
Someone please slap Rainsong with the progressive enhancement stick – their main nav has no hover effect when JS is off – slightly petty I know, but I know at least 10 ppl who browse without JS on (and not all of them are web developers etc.)
Tom Ross
Thursday, January 21st, 2010 16:38
These are awesome. I love the pixlogix menu.