Intro to Menus in UI

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]

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's menus, however. This can make cascading menus cumbersome and overwhelming. If you need to use too many items, consider changing the user flow altogether.

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]

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 mark 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 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.

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.

An inline menu in a web table is a small set of actions shown directly inside each table row, usually at the end of the row.

It lets users take action on that specific item without leaving the table view. For example, if you have a table of users, each row might have an inline menu with options like:

• Edit
• View details
• Delete
• Download

These options often appear as icons or inside a 3-dot (⋮) button that opens a small menu. Inline menus should be designed to stand out against the background, making it clear that they offer crucial, timely options for users. When deployed thoughtfully, they effectively balance form and function, guiding users without disrupting the overall layout or visual hierarchy.^[4]

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.

Leading icons are visual cues that help users quickly recognize menu items. When scanning a menu, users process familiar icons faster than they read text labels. Common examples include the scissor icon for "Cut" and the overlapping paper sheets for "Copy."

Place leading icons before the label or to the left in left-to-right writing systems. This way, users see them first while scanning. Use well-known, universally recognized icons to support quick recognition. Unfamiliar or abstract icons can slow users down and make the interface harder to understand.

Some brands place icons after labels. While this may seem counterintuitive, it highlights an important point. Every interface decision should be tested. In some cases, placing icons after the label can improve usability, match brand style, or support a specific interaction flow.

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. Use familiar shortcuts whenever possible, since following established standards helps with adoption and ease of use.

Remember, only advanced users rely heavily on shortcuts, so they should never be the only way to complete a task.