At Diamond, we run into many of the same components when we perform audits. 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.

hamburger menu icon: three lines, one stacked upon another

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. 

 

Xerox Star workstation from 1981

 

 

application menu from the 80s

 

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. 

disclosure hamburger menu. the icon sits to the left. to its right, there is a longer menu with the words posts, talks, about, and contact

Menu container pushes the hamburger menu button to the side.

 

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-labelledby). This informs the user of 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. 

the hamburger icon sits in the upper left hand corner of a box. beneath the icon is the word "menu" 

 Default state of the dialog hamburger menu.
 

 menu that has items for services, programs, blog, about, and contact

Dialog menu appears on top of hamburger menu symbol.

 

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-labelledby). 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. 

hamburger icon with the word "menu" beneath it

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 breadcrumb menu that says first page > second page > current page
    Source: https://design.gccollab.ca/

  • A search engine: It can make finding information quicker.
    a search box
    Source: https://hds.hel.fi/

  • 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.
    Fat footer example.
    Source: https://designsystem.digital.gov

  • In-line links: They will help users find other interesting content, and, as a bonus, it can help with search engine optimization.
    a wikipedia article that includes an excerpt with many in-line links
    Source: https://en.wikipedia.org/ 

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. 

Desktop

Mobile

desktop menu

mobile menu

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: