The More Menu 🪗

You might have heard of the hamburger menu. It's a user interface element that you can find all over the web. It's represented by three horizontal lines and when clicked, it opens up a menu.

Its graphic design was meant to be very "road sign simple", functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13... can't remember exactly).

— Norm Cox, original designer of the hamburger menu icon

Its design resembles a hamburger, hence the name (however, some also think it rather resembles an Oreo and should be called the Oreo Menu).

What the hamburger menu essentially does is hide content in exchange for screen real estate. This is of course useful on mobile devices, where every pixel counts.

You know where you can be more generous with your pixels? Exactly, on desktop.

The desktop is a place, where hamburger menus have no right to exist.

That extra click

While I'm absolutely fine with hamburger menus on mobile, all the beautiful UX designers out there need to keep one thing in mind: hiding content behind a button requires users to click on that button, every time they want to navigate. Yes. Every time. If your website or app requires a lot of navigation, introducing a hamburger menu might not be your best choice.

Hype Machine's iOS app is a prime example for a poor menu choice. They could have made their users' lives so much simpler, had they chosen a traditional tab menu (Beyond that I only have positive feelings towards Hype Machine).

Out of sight, out of mind

Apart from that extra click, there is another thing troubling me when I think of hamburgers. No, not literal hamburgers. I love hamburgers. I mean hamburger menus.

And it's again their original purpose: hiding content. Hidden content on user interfaces always attracts less attention. Users might not know about this link they have been wanting to click on for their entire lives, hiding behind these three horizontal lines.

Also, users are aware of that extra click. That's effort. As a consequence, users might not feel motivated to open up that menu.

So if possible, it's best to show content directly. Your links are important. Don't be so humble. They don't need to hide anywhere.

The More Menu

So, I want screen real estate, but I also want to make my menu's content as accessible as possible. The good news is, that you can have both. Enter the "more menu".

The more menu does exactly what the hamburger menu does. It's hiding content. But only part of it. On my website, I show the links that I consider most important in my main menu (in my case about, blog and where).

I hide the rest of my fine content behind another link in my main menu. It's called "more". Plain and simple. Here you can find more links. I consider them less important, so I'm okay with hiding them (in my case book of books, now, projects and talks).

I love this solution. At first, I thought about using an icon for the more menu. But wouldn't it be confusing to use a hamburger icon for a menu that only shows part of the entire menu? The label "more" does the trick.

Thanks to my blogger friend Kev Quirk, whose beautiful (and recently redesigned) website inspired me to go with this approach.

Finally, I have good news for all the accessibility nerds out there. You'll be happy to learn that I marked up the links on my more page using a <nav> element. Just like the accessibility gods intended. 👼