40 Beautiful and Effective Responsive Navigation Menus

Ease of navigation is one of the biggest keys to the usability of a website. If visitors can easily find what they are looking for they will be more likely to stay on the website rather than leaving and going to some other site. Effective navigation can help to increase pageviews, improve the user experience, and even increase revenue and profit.

As more and more users are accessing sites via mobile devices, responsive web design has continued to increase in popularity. One of the challenges of designing and developing responsive websites is to create a user-friendly navigation menu that works equally well for visitors on all types of devices.

While a few years ago navigational menus were a primary visual element in almost every web design, many responsive websites are now opting for a navigation menu that is much less dominant visually. These sites typically use a familiar icon of 3 horizontal stripes to indicate that a menu will be opened on click. Of course, this is only one approach and other websites use totally different approaches.

In this post we’ll showcase 40 different navigation menus of responsive websites. This will showcase many different styles and approaches, and should provide some inspiration that can be put to good use in your own design and development work.  The best way to experience these navigation menus is to click through and see how it works in the browser.

Grain & Mortar

Grain & Mortar

Your Majesty Co

Your Majesty Co

Andculture

Andculture

WP Engine

WP Engine

Pace Law

Pace Law

Antro

Antro

Fixed Digital Agency

Fixed

Draftfcb

Draftfcb

Zinio

Zinio

Marmoset Music

Marmoset Music

Static Interactive

Static Interactive

The Japan Times

The Japan Times

A List Apart

A List Apart

An Event Apart

An Event Apart

Mashable

Mashable

Stanford Arts

Stanford Arts

World Wildlife Fund

WWF

Tilde Inc.

Tilde

Paid to Exist

Paid to Exist

Web Design Ledger

Web Design Ledger

Fiafo

Fiafo

StudioPress

StudioPress

ThemeTrust

ThemeTrust

DevCasts

DevCasts

Awesem

Awesem

Matter of Form

Matter of Form

The1stMovement

The1stMovement

WebEffectual

WebEffectual

Mostly Serious

Mostly Serious

Daniella Draper

Daniella Draper

Wedge & Lever

Wedge & Lever

MarketPlace

MarketPlace

Webknit

Webknit

Tradestone Confections

Tradestone Confections

Coulee Creative

Coulee Creative

Rokivo

Rokivo

Curt’s Special Recipes

Curt's Special Recipes

Fall in Tennessee

Fall in Tennessee

Wallmob

Wallmob

More Air

More Air

For more design inspiration, see:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

195 Responses

Comments are now closed on this post.

  • Felix, November 10, 2008

    Superb list. Thanks for featuring our site.

  • Henry Jones, November 10, 2008

    Thanks for including us here with such great company.

  • Vandelay Design, November 11, 2008

    Felix and Henry,
    You’re welcome. Excellent work!

  • Dor Dan, November 11, 2008

    Thanks for including and neat list as well!

  • Scott Mallinson, November 11, 2008

    Many thanks for including my site in the list. There are some great examples that I haven’t seen before.

  • Andy, November 11, 2008

    God, there’s so much talent about!

    Do you actually do any work or do you spend your day looking at everybody elses work? ;)

  • Heiko, November 11, 2008

    Thank you very much for featuring my site!
    Am really flattered right now :)

    Keep up the good postings!

  • Bram Van der Sype, November 11, 2008

    Great post! Very nice for some inspiration!

  • Andrea Gandino, November 11, 2008

    This is truly a great and inspiring list; some stunning examples here, nicely done, thanks for sharing!

  • Vandelay Design, November 11, 2008

    Andy,
    Not as much work as I used to. Surfing around is actually part of my job now, it’s pretty cool.

  • eganm, November 11, 2008

    Great stuff. Vandelay is an awesome design reference!!!!!!

  • Conor, November 11, 2008

    Some more great stuff there! Well done for putting together yet another great collection :) I’ve been spreading the word about your blog

  • Chad, November 11, 2008

    Great post… i do agree… I love a good navigation… it sets apart the good and the great…. Fantastic post

  • Michael Austin, November 11, 2008

    Wish we made the list. Maybe next time http://www.michaelaustinproductions.com

  • Christine Range, November 11, 2008

    A very nice collection of navigation menus. Some are unusually interesting but they definitely have an impact. Thanks for the inspiration, I picked up some good ideas for mine.

  • Timothy, November 11, 2008

    Some of these were great. Some not so much. Example: the website Good. Very bland navigation. Could use something more attractive while maintaining simplicity.

  • Vandelay Design, November 11, 2008

    Timothy,
    Obviously I disagree since I included Good on this list. Yes, it’s simple, but that appeals to me. Thanks for sharing your opinion though.

  • Tom Ross, November 11, 2008

    Wow, very inspiring stuff. I especially like the Rzepack Pure nav.

  • Thomas, November 12, 2008

    Thanks Steven, Great list

  • Justin Mather, November 12, 2008

    one that i recently found, that i really love is: http://www.weareskylarkin.com/

  • Hediye, November 12, 2008

    Cool, thanx!

  • Rob Palmer, November 12, 2008

    Thankyou muchly for the inclusion!

  • DPW, November 12, 2008

    Great list,

    I also feel like another commentator that some of them are a little bland/ almost repetitive

    Some of them are quite wonderful intheir unique ways – Carbonica for example

  • Kelly, November 12, 2008

    Great collection and awesome variety. It’s nice to see some very simple plain text menus featured along side the graphic-intense menus.

  • Soh, November 13, 2008

    Thanks again! :-) Beautiful list~

  • Bryan P., November 16, 2008

    Wow, quite a list there. It must have taken some time to compile.

  • Webdesign Rosenheim, November 17, 2008

    Great Collection! Congratulations!

  • download punjabi songs, November 17, 2008

    nice list… really cool menus.. love all of them … now i just have to learn how to use them … bit new to websites..

  • Acai Berry, November 17, 2008

    Do you offer design services?

    Those are extremely elaborate designs..

    I would be interested in securing your services. =)

  • Vandelay Design, November 18, 2008

    Acai,
    Yes, we do offer design services, but these are not examples of our own work, just exemplary work from various designers.

  • isabellenewton, November 18, 2008

    Great list of navigation examples. I always think that the navigation of the site is one of, if not THE, most important part of the design. At the end of the day, the site can look amazing but if no one can get to the information they want to find they are going to click away and, more than likely, not come back.

  • fay, November 25, 2008

    Thanks for such a great list!
    I really enjoy the variety, each site is unique in some way!

  • burning windmill, November 26, 2008

    Some very inspirational sites there :-)

  • Preisvergleich, November 28, 2008

    Thanks a lot for layouts. A new article about buttons would be very useful too.

  • Jam, December 4, 2008

    AMAZING!. Loved most of them. They´re really inspiring. I will be talking about this post in my blog hopping my readers come and have a look. Thanks ;)

  • dash, December 8, 2008

    thank you great inspiration for sure

  • Micah Slavens, December 18, 2008

    thanks for the mention! these are all really great examples — good post.

  • John, December 31, 2008

    I love these lists, but I’ve read an article recently on “Inspiration Overload”. I hope you don’t mine me posting a link. (Remove it if you want).
    http://www.viget.com/inspire/overcoming-inspiration-overload/

    Basically, it says that there are people (you know who you are) that tend to get overwhelmed by too much design inspiration, and don’t know what to do with it all. In the “good old days” an inspiring piece would appear in the form of a Frazetta painting or an album cover. You really had to seek out the good stuff. Nowadays (is that a word?) we are surrounded by stunning work from countless talented people. The trick is knowing when to stop looking and when to start working!

  • Vandelay Design, December 31, 2008

    John,
    No problem posting the link, it’s relevant to the post. Yes, I agree with you.

    The trick is knowing when to stop looking and when to start working!

  • Best Coffee Makers, January 1, 2009

    Wow, what a nice collection of navigation menus. A lot of them are quite artistic but the simple ones are cool too.

  • Alojaweb, January 10, 2009

    very good, excellent list, other list but of headers

    http://www.smashingmagazine.com/2008/02/01/smashing-header-graphics-contest/

  • Laufkran, January 20, 2009

    Thanks for the cool list. It is very convenient for me! :-)

  • Jörgs Web Info, February 11, 2009

    A really good list, thanks for that one. However, I wonder why you left out the Branford Magazine Template. In my opinion its the best magazine template out there.
    But maybe your selection was more into design than functionality?

    • Vandelay Design, February 11, 2009

      Jorgs,
      Thanks for the comment. I didn’t include any templates in this list, that’s why Branford wasn’t included.

  • acai juice, March 7, 2009

    Awesome designs. These give me some great inspiration, thanks!

  • web design romania, March 8, 2009

    Great menus. This is a great inspiration

  • Conor, March 10, 2009

    Great list! Thanks for the inspiration :)

    I like the menu at the top of this page too :) > http://www.colourlovers.com/palettes/search

  • Realife Design, April 17, 2009

    Amazing sites! Will mine ever be worthy (www.realifedesign.ca)?? lol

  • Reza Farshbaf, April 27, 2009

    Hey! This is a great compilation. Thank you for your nice work

  • web tasarımı, July 15, 2009

    thank you nice sharing.

  • Bayrak, August 26, 2009

    Hey! This is a great compilation. Thank you for your nice work

  • siemens servisi, August 28, 2009

    i like these desins who s designers?

  • coffee club, August 29, 2009

    i really like these… really well done !!

  • Sensiz, October 1, 2009

    thank you nice sharing.

  • Emoturk, October 2, 2009

    i’ve been looking for this all time.. Oh! Thank u man, so much :) There are perfect.

  • Web Designer Pakistan, October 10, 2009

    A lot of work still needed o this part of web design..

  • sikiş izle, October 13, 2009

    like these desins who s designers?

  • direk izle, October 17, 2009

    Great list! Thanks for the inspiration

  • ssk emeklilik, October 17, 2009

    Thank you very much for featuring my site. A lot of work still needed o this part of web design

  • araç sorgulama, October 18, 2009

    A lot of work still needed o this part of web design..

  • kilo aldırıcı, October 19, 2009

    Hey! This is a great compilation. Thank you for your nice work

  • Web Site Tasarım, October 20, 2009

    Great and inspiring thanks to an archive.

  • ross, October 23, 2009

    great list of websites I really love the Carbonica navigation!

  • Erotik Hikaye, October 25, 2009

    Great and inspiring thanks to an archive.

  • rx1 zayıflama hapı, October 29, 2009

    A new article about buttons would be very useful too.

  • siemens servisi, November 4, 2009

    thanx for web dsign examples

  • acai, November 17, 2009

    like these desins who s designers?

  • haber, November 21, 2009

    its very nice and amazing.

  • sikis izlw, November 22, 2009

    thank you nice sharing..:)

  • Sanalhediye, November 24, 2009

    Hey! This is a great compilation. Thank you for your nice work

  • Program yükle, November 25, 2009

    oooo good admin thank you nice

  • Excellent collection of navigation menu design websites,
    I like this Good Very much

  • Eğitim, December 1, 2009

    beautiful themes are waiting for more new ones ;)

  • sikiş, December 2, 2009

    beautiful themes are waiting for more new ones ;)

  • frmstar, December 4, 2009

    Great stuff. Vandelay is an awesome design reference..

  • driver indir, December 18, 2009

    good thx.

  • seo, December 23, 2009

    I’m really very useful to follow a long time see this as a blog here Thank you for your valuable information.

  • sikiş sitesi, December 25, 2009

    beautiful themes are waiting for more new ones

  • lazer merkezleri, December 25, 2009

    thank so muchh

  • Eric Di Bari, January 13, 2010

    Great inspiration and designs, exactly what I was looking for. Thanks.

  • Sherwin shine, January 16, 2010

    Nice and useful article. Thanks for examples.I will work out these information in the next website.

  • Eric Di Bari, January 17, 2010

    Great navigation examples. This blog always has the best web design samples.

  • Sesli Chat Webcam Sohbet, January 19, 2010

    Hey! This is a great compilation. Thank you.

  • dekorasyon, January 27, 2010

    thanks for navigation Menus….

  • sesli sohbet webcam, January 31, 2010

    This blog always has the best web design samples. Thanky you admin

  • liseli sikiş, February 6, 2010

    thanks for navigation menu thanks

  • sesli sohbet webcam, February 11, 2010

    Good Thanks tou admin super.

  • sesli chat webcam, February 13, 2010

    Good Thanks tou admin super Worklight (as I understand it, and I am not any form of expert here), is posited on Secure Widgets. As security ‘though the layers” is going to be an issue with widgets, you know, I think they may be on to something. The next thing that people don’t often realise, is that while consumer widgets are “cool”, enterprise widgets actually save money (you know, in a way that can be measured.

  • รถมือสอง, February 28, 2010

    Good job! THANKS! You guys do a great website, and have some great contents. Keep up the good work.
    best regards,

  • Antique, March 16, 2010

    Beautiful menus. Great inspirations!

  • Jamie, April 2, 2010

    Would be much better if they were more mixes – they were all portfolio feeling. Would love to have seen more of an industry mix.

  • John Ryan, April 4, 2010

    Some great examples to inspire my creativity!
    Many Thanks!

  • Princo, April 8, 2010

    Some great examples to inspire my creativity!
    Many Thanks!

  • Website Design Surrey, April 13, 2010

    I love navigation, cool list!

  • Webdesign Frankfurt, April 16, 2010

    Hey,
    thanks for sharing. I love the 30elm Navigation. It’s awesome. I’ll try to implement that in my new Website!

    Alex

  • jbmv, April 17, 2010

    Some of them are a little boring, but I really like some of these menus.

  • faiz oranlari, April 17, 2010

    wow.. very.. This is truly a great and inspiring list; some stunning examples here, nicely done, thanks for sharing!

  • Some great examples to inspire my creativity!

    Thank you.

  • Some great examples to inspire my creativity!
    Many Thanks!

  • Vladimir, May 11, 2010

    Good set of menus, nice and useful :)

  • yeni albümler, May 16, 2010

    Some great examples to inspire my creativity!

  • Evan Skuthorpe, June 2, 2010

    some great inspiration for navigation designs here thanks.

  • web design, June 3, 2010

    Awesome! I can’t wait to give this a try!
    Great stuff, I can wait to see the resultats on my work, some are for fun, but some others will be very useful, thank you

  • cigersiz, June 3, 2010

    These give me some great inspiration, thanks

  • sikiş, June 13, 2010

    I love the 30elm Navigation. It’s awesome. I’ll try to implement that in my new Website!

  • diziizle, June 14, 2010

    This is truly a great and inspiring list; some stunning examples here, nicely done, thanks for sharing

  • microblog, June 22, 2010

    Great menus. This is a great inspiration

  • Andrew Barbara, July 2, 2010

    Just been looking at Bridge 55′s site today, knew i’d seen their site somewhere before! Really impressed with it aesthetically.

  • Sesli Sohbet BK, July 5, 2010

    Good list, thanks for that one. However, I wonder why you left out the Branford Magazine Template.

    • Vandelay Website Design, July 5, 2010

      Sesli,
      There are now examples included from templates or themes, just custom designs.

  • accident claims, July 7, 2010

    Loving the carbonica and remedy drive menus. Some work must have gone into compliling this list!!! five thumbs up! ;o])

  • Nottingham News, July 8, 2010

    Thanks for the share, Mint looks like it tastes fresh and cool

  • SesliChatSiteleri, July 21, 2010

    Just been looking at Bridge 55’s site today, knew i’d seen their site somewhere before! Really impressed with it aesthetically…

  • pimapen, September 13, 2010

    Great menus. This is a great inspiration

  • plastik, October 8, 2010

    Thanks for the share, Mint looks like it tastes fresh and cool

  • Video Sesli Sohbetbk, October 17, 2010

    Been looking at Bridge 55′s site today, knew i’d seen their site somewhere before! Really impressed with it aesthetically.

  • Seminyak resorts, October 19, 2010

    Great collection and awesome variety. It’s nice to see some very simple plain text menus featured along side the graphic-intense menus.

  • Thanks for the share, Mint looks like it tastes fresh and cool

  • Wow!!! i found the new, nice and beautiful fonts to make my project.
    Thanks for sharing this.

  • Web design hull, November 25, 2010

    Nice collection of menus, great inspiration!

  • carbon12, January 21, 2011

    Great set of menus! I’m always amazed how much a good menu adds to a design.

  • lpdesignhelp, March 25, 2011

    Such a diversity of designs highlights how important a strong, well-designed navigation is to a cohesive website. Great navigation drives the website. If it’s not clear how to navigate throughout the site, viewers will not stay long enough to figure it out. A great collection of navigation for inspiration.

  • Paarth, March 26, 2011

    very nice collection of cool CSS menus, thanks for sharing

  • Atif, April 30, 2011

    Excellent collection of Cool CSS menus, thanks

  • Marshall Boya, June 21, 2011

    Thanks for the share, Mint looks like it tastes fresh and cool

  • Madih-ullah, January 9, 2012

    Thank you for sharing such wonderful menus, i was looking for such.

  • Talha Okur, February 4, 2012

    wow! they are super. Thank you for all

  • Darren, October 21, 2012

    There’s some pretty cool ones there. I wish I could come up with something half as good.

  • Sesli Sohbet, October 31, 2012

    These give me some great inspiration, thanks

  • Joshua Meron, November 29, 2012

    I must disagree here, none of the examples are world class websites. Just avarage ok looking websites. When you make an excellent menu design, it needs to be readable, unique and beautiful.

    These days people look too much to what is current “trend” and not looking for the next trend. Very good designer does not look into trends, but creating a new one. Thats why 99% of designers never raise to a world class level.

  • Normally I don’t learn article on blogs, but I wish to say that this write-up very forced me to check out and do it! Your writing taste has been amazed me. Thank you, quite nice article.