What is a Cascading Menu?

A cascading menu is a computer menu system in which the option selected in one menu is used to determine which options are available in the next. Developers divide the list of possible values into two or more logical levels, and each of those levels is represented in a single menu. End users can then narrow down the total list of possible options before making a final selection.

Perhaps the most common use for cascading menus is within a computer operating system. In Windows XP, for example, users navigate a cascading menu every time they click the Start button. The icons in submenus such as All Programs and Control Panel aren’t displayed until the user selects an option from the Start menu itself.

Most computer applications also use cascading menus. Though it is displayed slightly differently, the top menu of most applications is another example. The submenus are not available until a user clicks File, Edit, View, etc., from the main menu.

Cascading menus are also frequently seen on websites, in various forms. Typically, they are presented to the user through a series of dropdown lists. Initially, only the top-level dropdown list is populated and enabled; others are empty and/or grayed out. Once the user selects an option in the first list, the next is activated and populated.

The use of cascading menus in websites has grown dramatically with the use of asynchronous JavaScript and XML (AJAX). In the past, the code required to populate one dropdown list based on the selection in a previous list would generally require the user to refresh the entire webpage. With AJAX, however, developers can create pages in which only parts of the page refresh. These AJAX-enabled cascading menus offer a better, faster user experience.

Although a cascading menu system can be created using any arbitrary system for dividing selections into groups, a hierarchical relationship is the most commonly used. For example, if the goal is to present the user with a list of cities from which to choose, the first menu could initially display a list of countries. After the user selects a country, the next menu might be populated with a list of states contained within the selected country. Only once the user selects a state is the city menu populated.