Dawn breaks over a narrow viewport. Here, where space is scarce, a small creature has adapted remarkably well. Three horizontal stripes. No words at all. This is the hamburger menu, and on a phone, it’s very good at its job.
But something is stirring. Each year, as screens grow wider, the hamburger menu begins a journey that has puzzled observers for over a decade.
A creature of the small screen
The hamburger menu evolved where every pixel counts. On a 390-pixel screen, there simply isn’t room for six navigation links, a logo, and a search field. So the hamburger tucks the navigation away, and visitors have learned, over many seasons, that the three stripes mean “more is in here.”
On a phone, this is a reasonable arrangement. The visitor gives up a tap. In return, they get a screen with room for content.
The migration begins
Now watch closely. As the viewport widens, past the tablet and onto a 27-inch desktop monitor, the hamburger menu does something extraordinary. It stays.
There it sits, alone in the top corner of a vast, empty header, guarding six links that would fit across the top of the page with room to spare. Behind it, the open plains of whitespace stretch to the horizon.
Researchers have offered several explanations. Some believe the hamburger is following the designers who first spotted it on mobile and grew fond of it. Others suspect it’s simply easier to build one navigation pattern than two. Most agree it looks very tidy in a design review.
Out of sight, out of mind
The visitors here are not so sure. When navigation is hidden, people use it less. The sections behind the menu might as well live in a different forest. A visitor looking for pricing will scan the page, find nothing that says “Pricing,” and leave, never suspecting that it was one click away the whole time.
The hamburger, of course, doesn’t notice. It’s very good at hiding things, including the fact that it’s hiding things.
A natural predator
In some habitats, the hamburger has a rival: the bottom tab bar. It lives at the base of mobile apps, showing four or five destinations with icons and labels, always visible, always reachable with a thumb.
The two rarely fight. They simply divide the territory. The tab bar holds the places people visit most, and the hamburger holds the rest. It’s one of nature’s more sensible compromises.
The return home
But there is hope. On well-tended websites, the migration has a happy ending. As the screen widens, the navigation links come out of hiding and settle across the header, where everyone can see them. The hamburger stays behind on small screens, where it belongs, and does excellent work.
It’s a delicate balance: show the navigation when there’s room for it, and tuck it away only when there isn’t. Get it right, and everyone in the ecosystem finds what they came for.
The hamburger, for its part, seems content. And as night falls over the small screen, its three stripes rest quietly in the corner, waiting to be tapped.
This episode is part of the Wild Interfaces series.