This post is pretty old, and might contain outdated advice or links. We’re keeping it online, but recommend that you check newer posts to see if there’s a better approach.All blog posts
How we managed to keep our menu always directly usable, entirely visible and always accessible.
So, let's talk about a healthier approach.
Keep your menu slim
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.
Strive for visibility
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”.
Keep your menu accessible
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.
Eat your own menu
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.