25+ awesome responsive menu solutions

We love responsive web design and rightfully so. As a matter of fact, it’s almost mind boggling when a website isn’t responsive these days. It’s been a trend on the up and up for a while now. It’s also been a trend that seems to change and create new technology every week to make it better.

One of the hardest parts of creating responsive designs is creating navigation menus that work on the larger screens as well as on the smaller screens. With responsive design, we can’t just take a whole website and scale it down; we have to actually plan it out so that it makes sense on mobile phones, tablets and desktops.

It’s easy to feel like there’s only so many ways to scrunch a large menu up into one small screen. You’d be surprised! Today, we’re going to show off some responsive sites that did a great job in keeping their navigation neat and their site intact. You’ll notice some sites that look totally different scaled down and others that added just a nice new element in the menu to make it exciting even on smaller screens.



Music production with Live 9 and Push | Ableton


Bretzel et Bredele

Bretzel et Bredele : du marketing, du web, des cookies… le tout autour d'un bon café !


Adaptive Path

Adaptive Path


Jan Finnesand

Jan Finnesand – Art and Creative Director


Not Complex

http---www.notcomplex.com-index.php (20131101)


Andre Maurice

Home | Andrè Maurice


United Pixel Workers

United Pixelworkers — Welcome


Oliver Russell

Welcome | Oliver Russell



Hicksdesign: design for new-fangled media


Design Made in Germany

Dmig 5


Digital Atelier

Digital Atelier | Creative Web Development


William Csete

William Csete | Web Designer & Developer


Shiny Demos

Shiny Demos


Future of Web Design

Future of Web Design 2013


Middlesex-London Health Unit

Home — Middlesex-London Health Unit



Welcome to AIDS.gov



Starbucks Coffee Company



ZURB — Product Design, Interaction Design & Design Strategy


CSS Tricks



The Work Cycle

The Work Cycle | Home


Gold Interactive

Gold Interactive | Intro


Harvard University

Harvard University


Boston Globe

The Boston Globe






sketchin - evolutive experience design


Contents Magazine

Contents Magazine | a new magazine for new-school editorial


Children’s Museum Pittsburgh

Children's Museum of Pittsburgh


The Haberdash Fox

Haberdash Fox


Dadaab Stories

Dadaab Stories


National Society of Collegiate Scholars

The National Society of Collegiate Scholars |


Have you constructed a responsive navigation element? Is there a more challenging aspect of responsive design? Let us know your thoughts in the comments.

  • http://www.jamie-dickinson.co.uk/ Jamie Dickinson

    Really interesting topic and some interesting examples – but it would have been so much better if you’d included screen shots of the navigation in their various states.

    • HemanthMalli

      Yes, even I felt the same. It would have more better with the screen shots!!

    • Peter Kennaugh

      Given that not all of the sites has fewer that 3 states (as is the way with responsive design), including all the screen shots would have made the article even more lengthy.

      I found it interesting visiting the sites individually and adjusting the browser size to see how each implementation worked, which provided more impact than screenshots would have.

      Overall I thought this was a well put-together list with quite a bit of variety throughout the examples. Many thanks!

  • Mark Thomson

    Sorry to bring this up, but, an article about responsive menus, but only with desktop screen shots?

  • http://makemeahappyuser.blogspot.com/ Julia

    That’s an interesting list, I like the version from oliverrussell.com, where the text get rotated.
    Just one idea for improvement: you could add an image of how the page looks in a smaller screensize, so we can see how the responsive menus work without having to click all the pages and sizing our browsers around ;)

  • Tim

    Man, I really hate when sites condense their nav down to a little hamburger icon. That thing needs to go away. I don’t know how many companies have done user testing on that, but we have where I work and the majority of people either a) Do not see it or b) Don’t know what it is.

    • James

      That’s strange. Our research actually proved the opposite. Placed top right was the most effective position.

    • Robbert

      I think that depends on the public.
      Site for a web developer event? yes.
      For you local dentist? no.

    • Honestly

      I’m almost 100% sure you’re just speaking for yourself. That ‘hamburger’ is pretty much globally renowned as the ‘click here to see the navigation’ icon.

  • http://sitedesign.joomir.com/ Ahmad Balavipour

    thanks alot very good design, but where can i find source code?

  • Ltr10 Creative

    Really a great post .Thanks for posting such useful

  • Abraham VG

    Really fantastic
    collection.Thanks for sharing.

  • Majaba

    As I tend to read blogs on a tablet it would have been good to see screenshots of both menu layouts to allow the comparison you suggest.

  • Владимир Шевченко

    hi! my blog have responsive menu, i create))

  • Daniel Wiklund

    In my opinion the title of this article is very misleading. I really don’t see a lot of “awsome resposive menu solutions” in the list. Most of them just have the same menu, until you reach the “mobile” breakpoint and then the menu i hidden and they’ve added the good old “hamburger” icon to the top – Don’t get me wrong this works on most sites (with a very simple menu) and is (if done right) also very user friendly – but I wouldn’t go as fare as calling it an “awesome solution”.
    some of them just scolls (or jumbs) to the bottom of the page when you click the hamburger icon, who came up with that solution????

    The only one in the list (ok i didn’t check every site) that has done something different and great with their menu is the Aids.org.

  • Evilfox

    I don’t see any “awesome” mobile menu here, they’re just the usual “mobile menu fix”, one that I found really inspiring is this one: http://demo.quirkyfoxlabs.com/tmpl/#silhouette
    This is an example of a real awesome mobile menu, different and really good looking.

  • Adam Smith

    I’ve created a responsive menu solution. Based on the hamburger design, my plugin Slidebars enables revealing menus and content for mobiles and desktops. Its ultra light weight (1.5 kb js and css) and has huge browser support including IE8, Firefox 3, Android 2.*. Check it out here: http://plugins.adchsm.me/slidebars