Short answer: Hamburger menu.
There are several types of mobile menus, but the hamburger menu is the most common. It’s named for the three lines that look like a burger’s bun, which is used to indicate the menu. Hamburger menus are also used on websites and are often called “navigation menus.” Other names for it are “drawer menu,” “three-line menu,” “side panel,” and “3-bar menu.”
It is identical to the Unicode character ≡ U+2261. This pattern is then best described as the combination of the drawer menu and reveal/hide button patterns in a manner where:
- The hamburger icon is displayed as an off-screen element.
- The menu is opened or closed by tapping on the icon, or by tapping on an element that is revealed when the hamburger menu is open.
- The menu can be placed in any screen location.
One of the reasons this pattern hadn’t popped up in this form earlier (and why it deserves distinction from other patterns) is that prior to touchscreen smartphones, UI design was not nearly as often constrained to fixed-size fullscreen layouts, as it is now. Mobile menus need to be designed responsively to fit different screen sizes.
Advantages of Hamburger Menus
Hamburger menus serve the following advantages:
- Easier to use than traditional menus: When space is constrained, a hamburger menu is a more efficient way to display menu items. It takes up less space on the screen and it’s easier for users to navigate.
- More organized: A hamburger menu separates menu items into categories, which makes it easier for users to find what they are looking for.
- Configurable: Hamburger menus can be customized to meet the needs of individual websites or apps. Users can choose which menu items they want to see and which ones they want to hide.
Cons of Hamburger Menus
Hamburger menus also have some disadvantages:
- Hard to discover: Some users may not know that the hamburger menu is a menu. They may not know what to do with it or how to open it.
- Confusing: Hamburger menus can be confusing for users who don’t know how to use them. They may not know which menu items are hidden behind the three lines.
- Limited functionality: Hamburger menus can only be used to display menu items. They can’t be used to display other types of information, such as text, images, or videos.
- Out of reach on mobile devices: Hamburger menus are difficult to access on mobile devices. They are often located at the top of the screen, which is difficult to reach with one hand.
Conclusion
Hamburger menus are a convenient way to display menu items on mobile devices. They are easy to use and more organized than traditional menus. However, they can be confusing for users who don’t know how to use them. They also have limited functionality. If you’re designing a mobile app or website, consider using a bottom menu to make it easier for users to find what they are looking for. You can include a hamburger menu as the last item on the bottom navigation.
