Hamburger Menu and WIX

The hamburger menu, also known as the "hamburger button", "mobile icon", or just the "three-line button", is a three-lined symbol often found on websites. It usually consists of three horizontal lines stacked on top of one another, like this:



When clicked, the menu expands to reveal more content under each section. This saves space in website design by condensing menu options into smaller areas without cutting out important information, so users can find what they're looking for faster.


The hamburger menu originated as an option for mobile users who needed quick access to key functions while using smaller devices and mobile browsers, but it has since moved into the mainstream website design trend.



Hamburger Menu Benefits and Drawbacks


The hamburger menu offers some clear benefits:

  • Saves space with condensed menu options that display when clicked

  • Mobile user-friendly; allows users to find what they need faster


However, the hamburger menu is not without its drawbacks.

  • Menu options are less obvious when condensed into smaller areas, which can lead to more user error

  • Reduced menu visibility means reduced interaction on key pages and reduced brand exposure

  • It could also pose a problem for touchscreens because it lacks hover functionality. The hidden menus require clicking or tapping to open, so people with motor disabilities could have trouble accessing the content.

As with any website design trend, the use of the hamburger menu is not for everyone. It's best used when you need to condense a long menu into an easily accessible area, and when increased user engagement is more important than brand visibility. If your site does not require this functionality — or if it would present problems for certain users — then don't use it at all!



How do I create a Hamburger Menu on my WIX website?


Hamburger menus are made up of two parts:

  1. The hidden sidebar menu (lightbox).

  2. The three-line hamburger button, which leads to the sidebar menu.

To create a sidebar menu:

  1. Click the Add (+) button on the left side of the Editor.

  2. Click Interactive then select Lightbox.

  3. Select a lightbox with a sidebar preset.

  4. Click the lightbox and click the Settings icon.

  5. Rename your lightbox to something recognizable such as "side bar menu".

  6. Select No under Automatically display lightbox on pages.

  7. Delete all of the elements inside the lightbox but do not delete the 'X' icon.