What’s on the Menu?

Versions and Symbols

Norm Cox became known for designing the “hamburger menu” icon, a stack of three horizontal black lines. The lines resemble a list of items, serving as a visual reminder of the menu list.

The hamburger menu was designed to be simple, functionally memorable, and to mimic the appearance of the list displayed after clicking it.

Originally, Cox designed it as a “container” for contextual menu options in the Xerox Star, similar to the contextual menu activated by a right-click.

Cox also designed the visual style of the Xerox Star user interface, including the document icon with its folded corner and the folder icon, both of which are still in use today.

Below are some other menu designs that seek to provide visual cues about the components and content that will be presented after clicking or selecting them.

Figure 1: Types of menus.

Below are two different applications. The first is a Google candy box. It is worth noting how the applications are arranged in a way that mirrors the visual representation of the menu.

Figure 2: Apps in my Google account.

In the second example, the NYT hamburger menu is displayed next to the icon that activates it. This behavior is interesting because it does not obscure any of the content, as would happen with the standard behavior, in which the menu appears on top of the website’s grid.

Figure 3: An Unusual Application of the Hamburger Menu on The New York Times Website.

There are other options created by various designers to represent the grid and the components that can be activated with a mouse click or selected through a touchpoint.

Figure 4: Other Menu Designs or Screen Components.