The unassuming three-pronged menu icon — better known as the hamburger menu — has been stirring up the allegiances of web design-minded folk lately. Some call it an unnecessary placeholder for second-order functions. Others wish it dead. It is not only divided, it is divisive.
No, it doesn’t always sate an appetite for clean design while meeting every functional need (one could say it is not the most “nutritious” feature) but in many cases it gets the job done. On the other front of the Hamburger war, web designers are making their case for the icon in minimalistic portfolios as well as commercial and educational designs. When playful interaction (note the sliding door, overlay, and reveal effects) or pared-down aesthetic (bold imagery, minimal text) is prioritized in a design, that surprisingly versatile burger begins to look pretty appetizing. These 21 hamburger-loving designs will have you pressing patties and heating up the grill.
It’s summer, for goodness sake. Let’s get grillin’ while the grillin’s good.
As they are almost entirely visually driven, portfolios have a little more design freedom. In this case, near complete minimalism opens the possibility for clean and prominent iconography, and the menu symbol sleekly fits the bill.
This interactive World Cup feature summarizes cup highlights since the 1950s and uses a menu icon to ensure attention on the soccer, er, football content.
On this commercial site, following Facebook Paper’s lead, the burger animates into an X after clicking.
With more secondary items (read: 20), the hamburguesa consolidates a good deal of extra content on the Squarespace page.
An immersive and innovative interactive feature put out last year by The Guardian, SDDS keeps the options straightforward (i.e. select video cards) and lets the menu icon do the rest of the work organizing extraneous content.
6. Media Monks
Media Monks’ collection of case studies is easily navigated; when clicked, the hamburger pulls up the cue of past work.
7. Teehan + Lax
On this site, the hamburger summons a complete overlay menu.
8. More Sleep
This Berlin-based creative brand agency keeps style and music a priority (your job app begins with your favorite film soundtrack). Their handling of off-canvas content alone makes this a worthy design.
Here, a sleek hamburger icon pulls down the menu and after a click converts to an “X.” A simple, elegant feature for a very busy Niemann.
10. Sismo Design
This site profiles the studio’s work in a colorful design that works effortlessly–a unique animation and “eye-con” accompany the burger.
A sneak peek at the next installment of the Hunger Games films, this site’s hamburger menu reveal is on hover, not on click. A testament to its versatility, the hamburger icon conforms perfectly to this dystopic and stark design.
We like the unique mouseover and simplicity of the menu (click for menu options…click again to exit).
13. Nice and Serious
A quirky palette and aesthetic for this fun-loving London design firm.
How to describe Lausive? “Avante-noir-glam (with a pinch of early-‘90s David Lynch)?” “Dairy hellscape?” Either way, the hamburger menu fits!
On this site, the hamburger is neatly integrated into the nav panel at bottom right.
AYR (an LA jeans company) recently unveiled this stunning redesign. Neat how the mouseover animation foreshadows the menu.
17. Gianluca Suarato
The portfolio of an Italian “creative director” features multimedia and video content in an original interface.
18. Somos Dedo
This Argentinian media agency keeps their great design in the details, like the subtle animations around the hamburger menu.
Click or scroll to open the Lexus Magazine site’s hamburger, a portkey to an off-canvas map.
Striking imagery and a fresh, relevant look accompany the (here, pragmatic) hamburger.
A beautiful cause, a great one-page design … Chimneys of Portugal is a clean sweep.
There are good burgers and bad burgers. And who knows, there may be too many burgers (note: Americans eat about 12 billion cow-burgers annually). But knowing how and when to include one in a webpage can add an edge to your design. These examples make a case for the versatile, oftentimes elegant, hamburger menu.