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.

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.

Medium menu
Medium

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.

Product Hunt menu
Product Hunt

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.

3. Node

You might be thinking “this guy is only show sites with small menus”. So, I give you Nodejs.org with eight links!

Node menu
Node

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.

4. Adamsilver.io

Shamefully, I include my own site for your pleasure :)

Adam Silver menu
Adamsilver.io

5. Google Design

Google Design allows users to horizontally scroll through the options.

Google Design menu
Google Design

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.

The Minimalists
The Minimalists

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.

I write articles like this and share them with my private mailing list. No spam and definitely no popups. Just one article a month, straight to your inbox. Sign up below: