Resisting the fast food menu

Hamburger menus (☰) are addictive. They let you tuck away your fat menus and feel fashionable again. But like with all fast food, you feel kinda sick afterwards. Because the truth is, you didn't solve your problem, you just created new ones. Chances are your hamburger icon isn't loading or your users don't know what it actually means. If they do, the hamburger menu still requires an extra interaction, and they probably have to wait for that until the entire page is loaded and the required JavaScript is successfully downloaded and executed.

So, let's talk about a healthier approach.

Fat menus tucked away behind hamburger icons are a result of desktop sites squeezed into a mobile layout. So the first step is embracing mobile first. Do a short usability study with your users and check your site's analytics. What are the top items users navigate to or which do you find are most important to be discovered quickly? Try putting just those items in your menu and make the rest of the site accessible via other pages and search. Chances are your menu can be so slim, it can simply always be entirely visible.

Is your menu still too large to be entirely visible by default on smaller screens? Then it's time to look into responsible ways to do so. Instead of hiding all menu items at once, consider incrementally hiding items the smaller the screen gets, starting with the once least used. As Luke Wroblewski puts it “[Visible and] obvious always wins”.

When you decide to hide your navigation, do it right. Don’t break default browser behaviour. Make it semantically correct, use ARIA roles, and think twice before adding JavaScript and little-supported CSS features.

Start with a plain accessible HTML menu. Do feature detection and only then enhance to something better. For example put the full menu on the page and move it to an off-canvas panel in capable browsers. Heydon Pickering explains how to use this technique with a Progressive hamburger menu.

You should also make the icon understandable to everyone by adding a text or title, like "menu" or "site navigation". The article Mobile Menu A/B Test backs this up with data.

We believe we can do better.

The first design for our own site voorhoede.nl always had its menu items tucked away behind a stylish hamburger icon and was conveniently missing our language selector. After some prototyping in the browser, we realised our logo creates plenty of space next to it for the full menu. By using two versions of our logo (one with just the shield, the other with also our company name) and conditionally placing the menu items and language selector on one or two lines we've created a menu which is always directly usable, entirely visible and always accessible:

Voorhoede.nl menu on a 320px and a 900px wide screen.