Introduction

GUIs (Graphical User Interfaces) have been part of computer usage for over 50 years. A great deal of time and money has been spent designing the UI (user interface) to give the best, quickest, most efficient, and clearest UX (user experience).

Menus are essential for finding your way around any website or application. I use several text-based menus on this site, the dropdown main menus that appear near the top of the page, a "grouping" menu near the bottom of pages such as this where I want to list related pages and, of course, a sitemap that is linked to in the footer of all the pages.

The idea is to allow people to quickly find other pages they may be interested in reading after landing on any page of the website. I have tried to make the link text as descriptive as I can with as few words as possible.

Website Menus

One of the few places I have used icons as menu items is on the webrings page, where I have used the following:

Webring icons: previous site, list all sites, random site, and next site

Using tables below there are several methods of inserting the characters on web page page. The decimal numbers can be used preceeded by &# and ending with ; or the Hex U+ codes can be used by using &#x followed by the characters after the U+, followed by ;, or the characters can simply be copy and pasted.

Of course you can also create your own using any supported image format or download the icon from one of the many sites that provide them. In some circumstances it may be better to do this anyway as even though I gone through the Unicode characters and put them into "sets" in the tables below, there doesn't seem to be any stylistic continuity between a lot of them.

Some menu icons are so iconic, if you excuse the pun, I decided to take a look at them and write a little about their history.

Menu Toggle Icons

These icons were designed to, or have come to mean, show that a menu can be toggled on or off by clicking on them.

Hamburger Menu Icon

The hamburger menu is a UI element consisting of three stacked horizontal lines that represents a hidden navigation menu. It is typically found in the top corners of apps and websites, especially on mobile devices, where screen space is limited. It is sometimes known as the triple bar or tribar icon.

The hamburger menu was invented in 1981 by Norm Cox, a UI/UX designer working on the Xerox Star computer system at Xerox PARC (Palo Alto Research Center).

At the time, the Xerox Star was one of the first GUIs, and Norm was tasked with designing an intuitive menu system that wouldn't take up too much screen space. The solution was the three-line hamburger icon, which could be clicked to reveal a list of navigation options.

After the Xerox project, the hamburger menu disappeared for decades and wasn't widely used again until mobile apps became popular a little afer 2007. It solved the problems that designers had of displaying navigation options on a small screen.

Kebab Menu Icon

The kebab icon is also sometimes known as the meatball or falafel icon.

Waffle Menu Icon

Ellipsis Menu Icon

The ellipsis is often used to mean "more", as in more information or menu items are available or more input is required.

Multimedia

Other Website Icons

home, contact (envelope or @), download, search, share, shopping cart

What is to be avoided is "mystery meat" navigation. Mystery meat navigation is a term coined in 1998 by Vincent Flanders, author of Web Pages That Suck, to describe web interfaces where the purpose of links or buttons is not immediately visible or identifiable.

Ribbon Toolbar

In 2007, Microsoft released Microsoft Office 2007 and magazines and the internet forums were alive with people complaining about the new ribbon menus they had introduced in the suite. Since then, people have become used to them and other software developers have introduce similar ribbon menus to their products.

Microsoft Word home ribbon toolbar, 2026

Microsoft Excel home ribbon toolbar, 2026

The term ribbon, as it relates to menus, was used as far back as the 1980s and was used for any horizontal menu, which was then usually textual. Nowadays it seems to only be used for graphical menus as introduced by Microsoft.

Save Menu Icon

The use of a 3.5" floppy disk image as a save icon goes back a long way, over 40 years. Like the hamburger menu icon it goes back to the beginnings of personal computers.

The 3.5" floppy disk was introduced in 1983, and designer Susan Kare, who was working for Apple, took the design of the disk and produced an icon from it. It appeared on the 1984 Macintosh.

By the 1990s, Microsoft and other companies were using their own version of the icon in their software.

Print Menu Icon