One component we see quite often is the hamburger menu. It is composed of three short and thick horizontal lines. The symbol is called a hamburger because it roughly resembles the three layers of a hamburger: the bottom bun, the meat patty, and the top bun.
Where did this hamburger come from? What is its purpose? Let’s look into this component and examine its usability.
A brief history of the hamburger menu
The hamburger menu symbol was first seen in the Xerox Star workstation in 1981. It was part of an applications menu. It was used to add any secondary commands that were not necessary to display on the main menu.
With the arrival of smartphones, designers reintroduced the hamburger symbol into mobile designs. Its aim was to fit all the main navigation into smaller screens by showing the menu by pressing on the symbol. Now, the hamburger menu exists as an alternative to the horizontal desktop menu.
Disclosure versus dialog
There are two commonly used patterns for hamburger menus: disclosure and dialog.
The disclosure menu
This menu uses show/hide techniques.
It has a specific set of expected interactions:
Keyboard interactions:
- The trigger button opens and hides the menu container with the spacebar or enter key.
- When the menu container opens, the next focusable element is the first item in the menu. After the last element in the menu container, the focus goes to the next focusable element of the page.
Screen reader interactions:
- The menu content is read only when the menu container is visible.
- The trigger button has an aria-expanded that switches from false to true when the menu container closes and opens, respectively. This indicates the state of the component.
- The nav has a label (aria-label). This informs the user the title of the navigation.
This working example created by Dennis Lembree demonstrates the disclosure menu.
The dialog menu
The dialog menu uses a popup technique that traps the focus within the menu container.
It has another set of expected interactions:
Keyboard and mouse interactions:
- The trigger button opens and hides the dialog menu with the spacebar, the enter key or the mouse.
- A close button within the dialog menu is required, and is activated with the spacebar, the enter key or the mouse.
- The escape key closes the menu.
Focus management:
- When opening the dialog menu, the focus moves to the first actionable element in this container.
- When closing the dialog menu, the focus returns to the trigger button.
- Keyboard focus is trapped within the dialog menu.
Screen reader interactions:
- The content of the dialog menu is only read when it is visible.
- The trigger button has an aria-haspopup set to “dialog” to indicate what type of element it activates.
- The navigation container has a dialog role and a label (aria-label). This conveys the type of container and its title.
A working example of a dialog hamburger menu.
Hamburger menus rely on semantic HTML
Both types of hamburger menus need accurate semantics. They will help assistive technology users understand the structure of the component. Double check these items to ensure your hamburger menu is accessible:
- The trigger to expose the hidden dialog menu is a button element.
- The word “Menu” is visibly included in the trigger button element.
- The dialog menu is right after the trigger button in the DOM.
- The menu is an unordered list (ul/li) inside a semantic navigation element.
Regardless of what pattern you choose, it is important to stick to the same pattern across the application or website.
Drawbacks of using the hamburger menu
Some say that the hamburger menu symbol is universally recognized. Others say that the data shows the opposite. So which is it?
According to research done on the hamburger menu by the Nielsen Norman Group, using the hamburger menu has a higher interaction cost. This means that users need to interact more with the content to get the information they need. Some users will be less inclined to notice the symbol. This being said, there are notable ways of making the hamburger menu work for everyone.
How to make hamburger menus more user friendly
First, as mentioned above, ensure the word “Menu” is next to the hamburger menu symbol.
Second, think about other methods users can access related pages within the site or application. The idea is to make the navigation easier and intuitive. Some examples of extra navigable elements are:
- Breadcrumbs: They can be useful to access parent pages.
- A search engine: It can make finding information quicker.
- A footer menu: The links have the potential to give users a glimpse of the content of a website. They can provide valuable contextual information.
- In-line links: They will help users find other interesting content, and, as a bonus, it can help with search engine optimization.
Third, restrict the hamburger menu to mobile devices. If you can avoid it altogether, please do, and display the same menu links on desktop and mobile.
Despite its mixed reviews, usage of the hamburger menu did solve a problem. With the help of user research and accessibility techniques, we can ensure a better user experience for all users (including people with disabilities). If the hamburger menu is the only viable solution, try the techniques mentioned above.
Sources: