30 Cutting Edge Examples Of CSS Navigation

Title-css-navigation-inspiring-webdesignNavigation 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!

1. Pixlogix


2. RainSong Media


3. Clockwork


4. Freestyle Sport


5. Fight For Future


6. Plug And Play Design


7. Zaplee


8. Media Temple


9. Deportation Day


10. Active Consulting


11. Arbutus Photography


12. Flickr Design


13. Deren


14. Lupus


15. Soh Takana


16. Thoughtbot


17. Abduzeedo


18. Squaredit


19. 3.7 Designs


20. Evan Eckard


21. Pixel Resort


22. Lonn Roth


23. Interactive


24. Nathan Borror


25. UX Booth


26. Clear Left


27. Real Mac Software


28. Appstorm


29. Dragon Interactive


30. Helmy Bern


Tom Walker

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.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now


  1. Charla Strough says

    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.

  2. says

    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.

  3. says

    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!

  4. says

    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.:)

  5. says

    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.)

  6. says

    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.

  7. Liam says

    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?

  8. says

    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

  9. Web4half says

    Awesome Header ” Pixlogix”. But for overall design my vote goes to “clearleft”. Very Neat Design… Thanks for the Awesome Web Site Collection.

  10. mavericdesign.com says

    Hi Tom,

    Great post, I especially like the Media Temple menu. Keep up the good work.

  11. Deepu Balan says

    Nice beautiful post Tom. Very good collection. Luv Pixelresort navigation, clearleft is equally good. Appreciate your efforts in putting this together.


  12. M.R. says

    Nice collection. Thanks for posting.

    I think #19 – 3.7 Design’s – navigation is pretty innovative.

  13. Danny says

    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..

      • Danny says

        @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

        • says

          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!