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.

1. Roman Kirichik

1_romanKirichik

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

2_mundial

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

3_Sienna

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

4. Squarespace

4_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

5_DeadlySins

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

6_mediaMonks

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

7. Teehan + Lax

7_teehan

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

8. More Sleep

8_moresleep

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

9_Christoph

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

10_sismo

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

11_mockingjack

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

12_purple

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

13. Nice and Serious

13_niceserious

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

14. Lausive

14_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

15_build

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

16. AYR

16_ayr

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

17. Gianluca Suarato

17_gianluca

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

18. Somos Dedo

18_Somos

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

19. Lexus

19_lexus

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

20. Landjaeger Magazine

20_landjaeger copy

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

21. Chimneys of Portugal

21_chimneys

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.

Comments