Many websites use a menubar, typically located at the top of all webpages, to provide basic navigation functionality. The menubar may simply include a number of links, or it may hold the titles of menus which drop down as the user's cursor passes over them or when the user clicks on them.

In general, menus are not the best way to help users keep track of where content can be found; the reasons for this are discussed under the topic of Navigation Bars. However, since a menubar occupies little vertical real estate, it can be a useful way of providing access to key functionality where space is at a premium (see Page Design). It can also be used in conjunction with other navigation aids, such as navigation bars, for sites that are just too complex to represent in their entirety. Therefore, although this guide encourages NEES web developers to use other mechanisms, there may be times when a menubar is needed.

Appearance of Menus and Menu Items

If menus are necessary, anchor them to a menubar across the top of the webpage. This is the customary location for menus in general software products as well as other webpages.

Make sure the menu is obviously a menu by making the title look like a link. Menus that appear and disappear as the user mouses over arbitrary words may never be discovered by users. If it looks like a link, the user will at least be cued to the fact that those those words can be used to access another location.

Menu titles should be short and form a consistent group. Since the menubar is limited in width, keep menu titles to 1-2 words and make them as distinct as possible. Users don't want to have to drop down a menu just to figure out what the menu title is all about.

Wherever possible, menu items should be of the form verb-object. Remember that the purpose of menus is to give the user access to "operations." This will be clearer if the first word is a verb.

Example: The verb-object phrases on the left more obviously refer to user actions than the titles on the right:
     Propose Experiment
Plan Future Experiment
Observe Ongoing Experiment
Contact On-Site Staff
NEES Proposals
Future Experiments
Current Experiments
On-Site Staff

Menu titles and menu items should be formatted using upper- and lower-case letters, following the conventions for titles (see Use of Fonts). That is, nouns, pronouns, verbs, adjectives, and adverbs should begin with a capital letter, while conjunctions and articles should be all lower-case.

Organizing Items within Menus

Group menu items together logically. Maximize the similarity of items within a category by making the language consistent yet clearly distinguishable. Expanding on the previous example, all actions related to "experiments" should be listed together, taking care to vary the verb and/or adverbs to differentiate the different operations.

Use a separator (horizontal line) to differentiate one category from the next. This will improve how accurately the user can find and apply operations.

Within a category, order items by the natural order in which they would be used. This will cue the user as to which operations he/she needs to perform first.

Don't use cascading (multi-level) menus. User studies show that cascading menus are both frustrating and error-prone for users. Not only does the cursor movement need to be precise, but the user is effectively forced to memorize not just what a menu contains, but what each sub-menu contains. Users consistently complain that they can't find the items they need.

Organizing Menus on a Menubar

Follow the standard software conventions for locating certain types of menus:
  • If you include Help, it should be the rightmost menu. However, consider carefully before including this (see Elements Shared by All Site Pages).
  • If you include Contact Us, it should be just to the left of Help.
  • If you have a File menu, it should be the leftmost on the menubar.