Top of page

Resisting the fast food menu

Blog

How we managed to keep our menu always directly usable, entirely visible and always accessible.

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

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.

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:

← All blog posts

Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?
Join our team