What is a burger menu?

You’ve almost definitely seen a burger menu before — and no, unfortunately, it’s not the McDonald’s kind.
A burger menu is that little icon with three horizontal lines, usually tucked into the top corner of a website or app. It looks a bit like a tiny stack of buns and filling… hence the name.

It’s one of the simplest UI patterns out there, and yet it plays a huge role in how we navigate the web.

A brief history of the burger menu

The burger menu icon was created in 1981 by designer Norm Cox for the user interface (UI) of the Xerox Star workstation — a pioneering bit of kit that helped shape modern user interfaces.

For a while, the icon didn’t get much love. Then along came smartphones in the late 2000s, with their tiny screens and big usability challenges. Suddenly, designers needed compact navigation that didn’t hog precious pixels.

And just like that, the burger menu made a glorious comeback.
Simple. Space-saving. Familiar. Perfect for mobile. 

When to use a burger menu

Burger menus can help declutter layouts and guide users through your website — when used well.

You’re designing for small screens
Mobile and tablet layouts don’t have the space for chunky navigation bars. A burger menu keeps things tidy.

You have lots of pages
If your site has multiple sections, a burger menu helps group them neatly so users don’t get overwhelmed.

You want a cleaner look
Sometimes, less is more. A burger menu keeps your landing page looking polished and focused.

Your content types repeat
If your site has variations of similar pages (think product listings, services, articles), the menu helps users find what they want without the clutter.

Great burger menu examples

1. Codrops

Codrops, , the design blog, offers loads of UI experiments — including some brilliant burger menu animations. Their menus often open into full-page transitions, smooth and satisfying to use.

2. Bhroovi Gupta

Bhroovi Gupta’s portfolio uses a clean, stylish burger menu that perfectly matches the rest of the site’s look and feel. High contrast, simple typography, and clear navigation. Lovely.

3. Yang’s Place

At first glance, Yang’s Place feels a little busy — but open the burger menu and suddenly everything makes sense. Clear structure, easy navigation, and a calmer user journey.

Burger menu tips and tricks

1. Add the word menu

Most people know what the three lines mean, but adding the word Menu removes any doubt and improves accessibility. It’s a tiny tweak that makes a big difference.

2. Keep it in the same place

Consistency matters. If the menu jumps around, users get frustrated. Keep it fixed (usually top right), no matter which page they’re on.

3. Use an Animation

A popular option is the three lines transforming into a cross to close the menu. It signals clearly: “Tap here to exit”. Helpful, intuitive, and visually appealing.

4. Follow the ‘Three-Click Rule’

Users should be able to get anywhere on your website in three clicks or fewer. When planning your menu structure, keep things simple and sensible.

5. Place the important stuff first

Your menu isn’t just a list — it’s a priority list.
What do your users need first? Homepage? Services? Pricing?
Whatever matters most should go right at the top.

Hopefully this has given you a clearer picture of what a burger menu is, why it’s useful, and how to make yours more user-friendly. It’s a tiny icon with a big impact — especially on mobile.

If you’re thinking about improving your website navigation or building something new entirely, our friendly Hiyield team is always up for a chat about how we can help.