A hamburger menu hides a website’s navigation behind a three-line icon. It saves space on small screens and leaves more room for page content.
But hidden navigation adds a step, as shoppers must expand the menu to see the available links.
Here’s how hamburger menus work, where they came from, and how to use them in your mobile website design.
What is a hamburger menu?
A hamburger menu is a collapsible navigation menu that saves screen space by hiding links until a visitor opens it. Visitors click or tap the hamburger icon (☰), which is three stacked horizontal lines, to show the menu.
You’ll typically find the hamburger button in the top-left or top-right corner of a website or app. It lets visitors access website navigation and keeps links off the main page layout.
Hamburger menu history
The hamburger menu debuted on the Xerox Star workstation in 1981. Designer Norm Cox created it to group commands that wouldn’t fit in a window’s header.
The three lines represented a list of options. Decades later, mobile websites and apps adopted the same compact format to save screen space.
Advantages and disadvantages of the hamburger menu
Hamburger menus create an ecommerce UX trade-off. They save screen space but hide navigation links.
Statcounter recorded 49.1% of US web traffic on mobile in September 2026, measured by page views. Your store’s traffic split and available screen space can help guide your choice.
Advantages
Hamburger menus save screen space on mobile commerce sites, leaving more room for products and page content. The icon is also familiar.
In a Nielsen Norman Group study, participants generally recognized it as a menu, especially when it sat in the top-left corner.
Disadvantages
Shoppers have to open the menu to see your categories. Nielsen Norman Group's 2025 report revisits earlier usability tests that found lower task success and longer completion times with hidden navigation, especially on desktop. The article says that hamburger menus are “viable, but not universal.”
When to use a hamburger menu
Check Shopify’s Sessions by device report to compare your store’s mobile and desktop traffic, then choose a layout for each screen size:
- Use a hamburger menu when: navigation links would otherwise crowd a small screen. Keep search and cart access visible.
- Skip a hamburger menu when: your main categories fit comfortably in a visible navigation bar.
- Combine approaches when: your store gets a large share of both desktop and mobile visits. Use the hamburger menu on mobile and visible category links on desktop.
Real-world examples: hamburger menus in action
These examples show two ways to organize navigation.
TCB Jeans
TCB Jeans uses a slide-out menu in the example shown. A plus sign beside “Product” indicates an expandable submenu, keeping product categories grouped under one heading.
You can create a similar structure with Shopify’s nested menus. In Content > Menus, drag category links beneath a parent item such as “Products.”
Gymshark
Gymshark’s site is an example of responsive web design, adapting its ecommerce navigation to screen size. In the example shown, desktop navigation displays category links: Women, Men, Accessories, and Explore.
Mobile navigation uses a hamburger button in the upper-left corner. Opening the mobile menu shows search and product categories.
The X in the top left closes the menu and returns shoppers to the page they were viewing.
How to add a hamburger menu to your online store
When designing a website, preview your theme’s mobile navigation to check that it offers the menu layout you want. Hamburger menus typically use HTML for structure, CSS for styling, and JavaScript to control opening and closing.
Shopify themes provide this functionality, so you can configure your menu through the admin and theme editor instead of coding it yourself:
- Add navigation links. In your Shopify admin, go to Content > Menus and open your main menu. Click Add menu item, enter a clear label, select its destination, and click Add. Repeat for each link, then save. Shopify’s menu-editing guide covers these steps.
- Group related links. To create an expandable submenu, drag links beneath a parent item. For example, place “Jeans” beneath “Shop.” Shopify allows up to two nested menu levels, though where they appear depends on your theme. Check your theme’s documentation to confirm how many levels it displays. Save your changes.
- Select the menu in your theme. Go to Online Store > Themes and click Edit theme. Open the Header section and find its menu setting, sometimes located within a menu block. Select the menu you edited. Many themes automatically display it behind a hamburger icon on mobile; desktop menu options vary by theme.
- Preview and test. Switch the theme editor to mobile preview. Open the hamburger menu, expand each submenu, and check the links. Compare the desktop layout, save your theme changes, and test the menu on a phone.
Tips for hamburger menu success
Apply these six website design tips to make your hamburger menu easy to find, open, and navigate:
Make it consistently visible
Place the hamburger button in the top-left corner, where users expect to find navigation. Keep its position consistent across pages and leave enough space around it to separate it from nearby controls.
Stick with the standard hamburger icon
Choose three horizontal lines (☰). Users generally recognize this shape, but familiarity varies.
Add a visible “Menu” label to clarify its purpose, especially for less experienced users. Avoid decorative borders or unusual shapes that could make it resemble a different control.
Prioritize menu item hierarchy
Arrange menu links to follow your website structure, with related subcategories grouped beneath clear headings. Put product categories ahead of company information and policies.
Baymard Institute’s navigation research found that participants often felt overwhelmed by more than about 10 subcategory options. Break long lists into smaller groups and highlight the shopper’s current category to help them keep their place.
When a heading expands a submenu, add a “View all” link beneath it so shoppers can browse the whole category.
Be mobile-friendly and accessible
More than 1 in 4 US adults have a disability, and 5.5% have a vision disability, according to the Centers for Disease Control and Prevention. Run these website accessibility checks on your menu:
- Accessible labels. Give the button a name such as “Menu” that screen readers can announce. Identify the navigation region and communicate whether the menu is expanded or collapsed.
- Tap targets. The Web Content Accessibility Guidelines (WCAG) 2.2 specify a minimum of 24 by 24 CSS pixels, with exceptions such as sufficient spacing around smaller targets. For easier tapping, aim for 44 by 44 CSS pixels, the stricter Level AAA target.
- Icon contrast. Give the hamburger icon at least 3:1 contrast against its background.
- Keyboard access. Check that visitors can open the menu, move through links, and close it using a keyboard, with a visible focus indicator.
Add animation and visual feedback
An animated hamburger icon adds visual feedback to your UI design by changing into an X when the menu opens. The X indicates how to close it.
Keep transitions brief and respect reduced-motion preferences for visitors who have disabled unnecessary animation.
Test and get feedback
Ask shoppers to find a specific product using your menu. Watch where they hesitate, choose the wrong category, or backtrack.
Include people who use keyboards or screen readers, then revise confusing labels and repeat the test.
Using a hamburger menu with other navigation tools
Pair hamburger navigation with visible shortcuts so shoppers can reach shopping destinations directly. Choose a combination that fits your screen space and catalog:
- Top navigation plus hamburger. Keep key shopping links, search, and the cart visible. Place secondary destinations inside the menu.
- Tabbed navigation plus hamburger. Let tabs switch between related product groups within a page. Keep filtering and sorting in separate, clearly labeled controls.
- Sticky header plus hamburger. Keep the menu button, search, and cart available as shoppers scroll. Limit the header’s height so it leaves room for products.
- Breadcrumbs plus hamburger. Add website breadcrumbs to show where a product lives within your category hierarchy and give shoppers a direct route back to its parent category.
Compare layouts using the same shopping task. Record completion time and wrong turns, then choose the version that helps shoppers find products more easily.
Hamburger menu FAQ
What is the 3 dots menu called?
A three-dot menu is usually called a “more options” or overflow menu. Three vertical dots (⋮) are also called a kebab menu, while three horizontal dots (…) are sometimes called a meatball menu.
What is a hamburger menu on a website?
On a website, a hamburger menu is the navigation panel behind the three-line icon (☰), usually in the header. Online stores can use it on mobile to hold product categories, account links, and policy pages, while desktop layouts may show those links in a visible navigation bar.
Why is it called a hamburger menu?
The icon is called a “hamburger menu” because it resembles a hamburger. Its three stacked horizontal lines represent the top bun, patty, and bottom bun.
What is an example of a hamburger menu?
One example of a hamburger menu is a mobile clothing store’s three-line button that opens a panel with links to “Tops,” “Jeans,” and “Accessories.” Shoppers tap the button to see the categories, then select one to browse its products.
How do you find the hamburger menu?
To find the hamburger menu, look for three stacked horizontal lines (☰), usually in the top-left or top-right corner of a website or app. The icon may appear beside, under, or above the word “Menu.” Click or tap it to reveal the navigation links.
