Navigation

25+ awesome responsive menu solutions

By Kendra Gaines | Web Design | Nov 6, 2013

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.

 

Ableton 

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

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

 

Aids.gov

Welcome to AIDS.gov

 

Starbucks

Starbucks Coffee Company

 

Zurb

ZURB — Product Design, Interaction Design & Design Strategy

 

CSS Tricks

CSS-Tricks

 

The Work Cycle

The Work Cycle | Home

 

Gold Interactive

Gold Interactive | Intro

 

Harvard University

Harvard University

 

Boston Globe

The Boston Globe

 

Disney

http---disney.com-(20131101)

 

Sketchin

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.

Share this post
Comments (no login required)
  • 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
    information.

  • 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))
    http://www.howtomake.com.ua/

  • 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