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.

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.

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.

4. Adamsilver.io

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

5. Google Design

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

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.

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.