How the Hamburger Menu Simplifies Ecommerce Navigation

With more and more people using their mobile phones to shop online, it’s essential for websites to be mobile responsive and easy to use. The problem is, phone screen real estate is tight. If your website’s navigational elements are jammed together or confusing, visitors will likely bounce and shop elsewhere.

That’s why many websites and apps turn to the Swiss Army knife of mobile navigation: the hamburger menu. The simple three-line icon has become the international symbol for “more navigation options here,” collapsing a site’s menu into a single beefy button.

Here’s more on the power and pitfalls of the hamburger menu—its history, core features, and how to use it effectively in your mobile website design.

What is a hamburger menu?

For years, the standard website navigation method was a horizontal menu—a row of words for each category stretching across the top of the screen. But as mobile browsing exploded in the late 2000s and early 2010s—fuelled by advancements in smartphone technology and mobile internet connectivity—web designers needed a more space-efficient solution.

Enter the hamburger menu (☰)—a simple icon of stacked parallel horizontal lines (the bun, if you will) sandwiching a middle line (the hamburger patty)—allowing users to expand and collapse navigation options as needed. You’ll typically find the hamburger menu button nestled at the top left or right corner of the website or app.

Hamburger menu history

The hamburger menu actually predates mobile devices. In the early 1980s, designer Norm Cox created it for the Xerox Star workstation’s graphical user interface, a precursor of the original Apple Macintosh interface. Cox wanted a simple, recognizable icon to open a list of actionable items with a click.

After its initial introduction, the hamburger menu saw limited use and was largely forgotten until the widespread adoption of mobile phones around 2009. The need for efficient ways to present menu options on small screens without overwhelming users made the compact tidiness of the hamburger menu icon an ideal solution.

The hamburger menu’s popularity was secured when Twitter and other phone apps adopted it, followed by its use in Voice Memos on the iPhone 3GS and its companion iOS 4, cementing its role as a familiar symbol for hidden navigation.

Advantages and disadvantages of the hamburger menu

Hamburger menus are ideal for mobile devices, but nav bars and tabbed menus may better serve desktop users. Here’s why:

Advantages

The compact size of the hamburger icon is its raison d’être. It saves precious screen real estate and declutters the website design, particularly on smaller screens like smartphones. Clicking or tapping the hamburger icon reveals the site’s navigation, whether through a sliding menu, a drop-down menu, or a full-screen overlay. This can improve the mobile customer experience.

Disadvantages

While the space-saving advantage is undeniable, some argue hamburger menus on desktop browsers can hinder discoverability. If users aren’t familiar with the menu icon, they may miss it entirely, overlooking important site content or navigation options.

To address this, consider implementing responsive design templates with different menu structures for different devices. A website might display a traditional horizontal nav bar on desktops, but switch to a hamburger menu on mobile devices to conserve screen space.

Real-world examples: Hamburger menus in action

You’ll often see that responsive design has been applied to a website, so the hamburger menu only appears on the mobile version while a different menu style appears on desktop devices. Here are a couple of ecommerce websites that use hamburger menus effectively:

TCB Jeans

TCB Jeans keeps things simple with a standard three-line hamburger menu button at the top of its mobile site. When you click it, a list of links slides out from the left side, including items for Home, Products, and About Us. The Products link has a small plus sign next to it, hinting that there are more options if you tap.

TCB’s desktop website also features a hamburger menu, allowing a full-width photograph background and incentivizing promotions to take center stage. On the mobile version, the hamburger menu slides in as an overlay, providing a visual cue to the users that the menu can be hidden, revealing the page behind it. TCB’s hamburger menu design is:

• Clean. It’s a bad idea to bunch up menu buttons on a small phone screen. Better to hide them in the hamburger menu.

• Familiar. The hamburger is common on mobile sites, so it’s not confusing to most users. 

• Allows products to steal the show. By hiding the menu behind the hamburger button, product photography stands out more, reinforcing the products for sale.

Gymshark

Gymshark’s website is a great example of how a desktop website can differ from its mobile-optimized version. On desktop, there’s no hamburger menu; however, on mobile, the hamburger menu appears in the upper left corner. Tapping it reveals a search box and product category sub-menus. To go back to the home page, you just tap the X icon in the upper right.

Gymshark’s hamburger menu works well because it prioritizes what matters most—showing deals and new clothes first for instant engagement. It’s also familiar, with the menu button placed where you’d expect and a simple, easy-to-understand list that follows.

Tips for hamburger menu success

Website owners using hamburger menus can keep these six tips in mind to enhance user experience and improve conversion rates:

Make it consistently visible

In most cases, the hamburger menu is small. Make sure it’s still easy to spot. Put it in the top left corner or top right corner of the screen, where users tend to look. And keep the placement consistent on each of your site pages.

Stick with the standard hamburger icon

Use the widely recognized three parallel horizontal lines (☰) for your hamburger menu. These icons are widespread, and most users instantly understand their purpose.

Prioritize menu item hierarchy

Organize your menu items logically. You might add a search box, and then rank the most important and frequently accessed categories or pages from the top down.

Be mobile-friendly and accessible

Make sure your menu works well on all mobile devices and touchscreens. Menu items should be large enough to easily tap with a finger.

Add animation and visual feedback

As the user interacts with the menu, subtle effects provide visual cues. For instance, lines can rotate and morph into an X or + to indicate opening and closing. Lines can change thickness or expand subtly. Fade and shift effects add depth as the user interacts. Or, you might change the color or make it bounce slightly when tapped.

Test and get feedback

Before finalizing your hamburger menu, test it on real users. Observe how they interact with it and gather feedback.

Using a hamburger menu with other navigation tools

Sometimes, the best way to improve site usability is to mix and match different buttons and menus. Each type has its own strengths and weaknesses, but when used together, they can create a more seamless and effective user experience.

Ecommerce web designers can use combinations that make product discovery easier, with clear and direct access to the cart and checkout process. Check that all navigation elements are easily tappable on touchscreens. Test different combinations to see what works best for your target audience:

• Top nav plus hamburger. Use top navigation for essential categories and functions like shop and cart, while reserving the hamburger menu to access less frequent navigation features like About Us, Contact, Customer Service, and Policies. This keeps the main screen clean but still provides quick access to necessary pages.

• Tabbed nav plus hamburger. Use tabbed navigation inside a product category page to filter or sort products like New Arrivals, Bestsellers, and Sort by Price. This allows users to quickly refine their product search after using your hamburger menu for overall site navigation.

• Sticky header plus hamburger. The sticky header contains vital shortcut links to the main categories and stays at the top of the screen as you scroll. The hamburger menu would be used for incidental pages.

For example, Fly by Jing’s website uses a hamburger menu for broad menu selections, but the shop page itself uses a tabbed menu with four options (“Sauces,” “Sets,” “Pantry,” and “Merch”) for further refinement.