Designing responsive menus without a hamburger
I am not going to tell you why the hamburger sucks because someone else has done the hard work for me — thanks James Archer!
I am going to provide how you might design a responsive menu without a hamburger, by example.
Example 1: Medium
A big part of Medium’s success is in its simplicity and it can be seen in its menu. If you’re reading this on a small screen you will see the menu takes up a little more space by dropping down below the header.
You probably didn’t notice this.
That’s because like most people, you don’t care about the fine detail of Medium’s design, you just want to use the site for its content.
Example 2: Product Hunt
Product Hunt always displays the menu below the header, regardless of screen size.
As there is not enough room for all the links, they wrap on to two lines. Whilst I am sure this menu could look a little nicer with a tad more effort, the menu is still very user-friendly on small and big screens.
And, this particular website has a target audience of highly critical, industry designers and developers, and it is still a very much loved website.
Example 3: Node
You might be thinking “this guy is only demonstrating sites with very small menus” so I give you Nodejs.org with eight links!
When in big screens the links are on one line, and when there is not enough room, the links are simply put into two columns.
Out of all the examples this one takes up the most space. A few pixels could be trimmed via reducing the size and space around the logo. But they needn’t bother, this works.
Example 4: adamsilver.io
Disclaimer: this is my own site that I am shamelessly plugging. Whatevs :)
My site has 4 links for the moment, but this will be expanding to at least 5 soon enough. Luckily for me, I already have plenty of inspiration above.
Example 5: Google Design
Google Design allows the user to horizontally scroll through the options.
Horizontal scrolling used to be ill-advised but on mobile devices this simple approach works nicely and keeps working nicely when more and more links are added.
Example 6: The Minimalists
The Minimalists is designed true, to the message they are sending out. They have taken the approach of “let the browser do it’s thing”. The browser does what a browser does best. When there is not enough room, the links just wrap on to the next line.
Summary
What I love about these examples is how boringly simple and user-friendly they are.
User’s don’t mind scrolling and it’s wise not to exert too much energy trying to fit everything above an imaginary fold.
If you know of any other great examples, please send them my way and I can add them.
If you enjoyed this, please hit the “recommend” button below. Thanks!
