Making a Case for the Hamburger Menu

The direct three-pronged menu icon — better known as the hamburger menu — has been exciting up the allegiances of web design-minded folk lately. Some name it an unneeded 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 a 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 the grill.

Read Also: 12 Apple Watch Apps That Could Change Your Life

It’s summer, for goodness sake. Let’s get grillin’ while the grillin’s good.

1. Roman Kirichik

Roman Kirichik

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.

2. Mundial Memories

Mundial Memories

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.

3. Siena Construction

Siena Construction

On this commercial site, following Facebook Paper’s lead, the burger animates into an X after clicking.

4. Squarespace

Squarespace

With more secondary items (read: 20), the hamburguesa consolidates a good deal of extra content on the Squarespace page.

5. Seven Deadly Digital Sins

Seven Deadly Digital Sins

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

Media Monks’ collection of case studies is easily navigated; when clicked, the hamburger pulls up the cue of past work.

7. Teehan + Lax

Teehan + Lax

On this site, the hamburger summons a complete overlay menu.

8. More Sleep

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.

9. Christoph Niemann

Christoph Niemann

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

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.

11. Hunger Games: Mockingjay Exclusive

Hunger Games: Mockingjay Exclusive

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.

12. Purple Rock Scissors

Purple Rock Scissors

We like the unique mouseover and simplicity of the menu (click for menu options…click again to exit).

13. Nice and Serious

Nice and Serious

A quirky palette and aesthetic for this fun-loving London design firm.

14. Lausive

Lausive

How to describe Lausive? “Avante-noir-glam (with a pinch of early-‘90s David Lynch)?” “Dairy hellscape?” Either way, the hamburger menu fits!

15. Build in Amsterdam

Build in Amsterdam

On this site, the hamburger is neatly integrated into the nav panel at the bottom right.

16. AYR

AYR

AYR (an LA jeans company) recently unveiled this stunning redesign. Neat how the mouseover animation foreshadows the menu.

17. Gianluca Suarato

Gianluca Suarato

The portfolio of an Italian “creative director” features multimedia and video content in an original interface.

18. Somos Dedo

Somos Dedo

This Argentinian media agency keeps its great design in the details, like the subtle animations around the hamburger menu.

19. Lexus

Lexus

Click or scroll to open the Lexus Magazine site’s hamburger, a portkey to an off-canvas map.

20. Landjaeger Magazine

Landjaeger Magazine

Striking imagery and a fresh, relevant look accompany the (here, pragmatic) hamburger.

21. Chimneys of Portugal

Chimneys of Portugal

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.

Ruben Harutyunyan

Back to top