Intro to Menus in UI

Explore the different types of UI menus and their uses

Visual Design

10 exercises

Menus are an essential element of product navigation and interaction. They are crucial in content-rich products as they help save space or even create a minimalistic look.

Menu design dramatically affects user experience. When creating user-friendly menus, keep in mind things like labels, icons, and different states.

To choose the best menu type for the project, consider its objective. When and where will it appear, and what will it help users achieve? Correctly chosen menus are self-explanatory and easy to find and manipulate.

Basic dropdown menu

Basic dropdown menus are UI controls that contain a simple list of options from which users may only select one option at a time. Once users make a selection, the menu gets closed.^[1]

Pro Tip! If the menu is close to the edge of the screen, align it vertically to keep all menu items visible.

Cascading menu

Cascading menus are an excellent choice for categorized content. They include a parent element and its children. The children usually unfold when users select or hover over an option.

This type of menu is useful when some options contain multiple sub-options. For example, the item New often includes the types of new documents users can create.

Avoid adding too many options to the children menus, however. This can make cascading menus cumbersome and overwhelming. If you need to use too many items, consider changing the user flow altogether.

Pro Tip! Cascading menus should never be used on mobile.

Contextual menu

Contextual menus appear when users interact with a specific element. On desktops, they are usually triggered on right-click or with a keyboard shortcut.

Contextual menus appear next to where users click. Their list of options can vary based on the click target — for example, it can be different for text and images.

Usually, contextual menus contain frequently used actions related to the current context. For example, right-clicking on text in Google Docs reveals a contextual menu with text-specific actions like Copy, Paste, Delete.^[2]

Pro Tip! Contextual menus are hidden by default, and users may not know they exist. That's why it's important to also make these actions accessible from a visible place, like the menu bar.

Single-select menu

Single-select menus allow users to pick one option from a list. They come in handy when the menu options are mutually exclusive — only one option can be chosen at a time.

Single-select menus need to include a selection indicator to make the user's choice. Commonly it's a checkmark, bold text, or color overlay.

Single-select menus are great for selection, especially when filtering. However, avoid using this menu type to activate modal windows, dialog boxes, or dynamic controls.^[3]

Multiselect menu

Multiselect menus enable users to select multiple items from a list simultaneously, offering flexibility and enhanced control. Here are common methods for enabling multiselect functionality:

Utilize hotkeys such as Shift, Command, or Control in conjunction with mouse clicks
Use checkboxes to mark desired options
Implement a tagging system, where clicked items appear as tags at the top

To simplify decision-making, make selected items prominently visible, thereby reducing cognitive load. However, it's worth noting that multiselect menus can be challenging to implement effectively on mobile platforms due to space constraints.

Pro Tip! Make sure users have a way to deselect all items if they change their minds.

Search menu

Search menus are specifically designed for handling long lists, such as a list of countries or languages. They improve user experience by incorporating features like auto-suggest or auto-complete, which dynamically filter results as users type in their query.

By integrating a search function into a lengthy menu, you're essentially streamlining the navigation process. Users can quickly locate their desired option without endlessly scrolling through a list. This functionality not only saves time but also reduces cognitive load, making it easier for users to complete their tasks.

Menu scrolling

The size of the screen limits the number of menu items we can show at once. One of the solutions is to add scrolling. Don't forget the scroll bar as it indicates the user's relative position in the list.

If the number of options is too big, scrolling can become tedious. In this case, adding search to the menu can be an option — or changing the user flow altogether.

How many options are too many? We say a couple of scroll wheel turns, but use common sense to determine that.

Place icons before labels

Leading icons are the visual cues that appear in menus. When scanning the menu, users recognize familiar icons much faster than they read labels. Common examples of leading icons are the scissor icon for "Cut" and the two sheets of paper for "Copy" commands.

Place leading icons before the label, or to the left in left-to-right writing systems, so users see them first. Make sure to choose commonly used icons with universal meaning — unfamiliar leading icons will only confuse users.

Pro Tip! If you doubt whether icons are self-explanatory enough, test them on your users with open-ended questions like: "What do you think this icon means?"

Keyboard shortcuts

You can include keyboard shortcuts in the menu to help users learn them. Shortcuts trigger specific actions without the need to navigate to the menu itself. As users become familiar with them, it can really speed up their workflow.

There's no need to create shortcuts for all possible actions and menu items. Add them for the most common actions like copying, cutting, and pasting.

Keep in mind that only advanced users routinely use keyboard shortcuts, so make sure they're not the primary way — or the only one — to complete a task.