Designing a responsive menu without a hamburger

James Archer has explained why the hamburger menu can cause usability problems. I thought I’d jot down a few alternative designs here.

1. Medium

Medium’s success is down to it’s simplicity which can be seen in its navigation which simply drops underneath the header.

Medium’s navigation stacks on small screens

2. Product Hunt

Product Hunt follows the same approach as Medium, but does regardless of screen size. But, as Product Hunt has more links, they wrap onto two lines.

This menu could be designed a little better, it’s hard to argue with how simple this is to operate across all screen sizes.

Product Hunt’s navigation stacks underneath the header regardless of screen size

3. Node

Node’s site has eight links, and they lay them out plainly in two columns on small screens. On large screens they are displayed on one line.

Node’s navigation is in 2 columns on small screens

4. Adamsilver.io

My site follows suit and I’ve had no complaints.

My site stacks navigation below header

5. Google Design

Google Design lets users horizontally scroll which I’ve noticed a number of news sites are employing.

Google Design uses horizontally scrolling

It’s good to avoid horizontal scroll, but on small screens, this approach works well and scales too.

6. The Minimalists

The Minimalist’s site keeps their navigation bar simple just like their overall message. Links simply wrap.

Minimalists stack their navigation

Summary

These designs are boringly simple and user-friendly. User’s don’t mind scrolling and it’s wise not to exert too much energy trying to fit everything above an imaginary fold.