Designing a responsive menu without a hamburger
I’m not going to tell you why the hamburger sucks. James Archer has done that for me. Instead, I’ll provide some alternative responsive menus that avoid the hamburger.
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.
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.
You might be thinking “this guy is only show sites with 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.
Shamefully, I include my own site for your pleasure :)
5. Google Design
Google Design allows users to horizontally scroll through the options.
Horizontal scrolling is normally ill-advised but on mobile devices this simple approach works well. And it scales pretty nicely too.
6. The Minimalists
The Minimalists website is designed true to their message. When there’s not enough room, the links wrap on to the next line. No biggie.
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.