Context menu

lastmod 2025-12-11created 2025-12-112 edits

A context menu (also called a contextual menu) is a pop-up menu that appears when you click an item in a graphical user interface, listing various options depending on the action that invoked the menu, the running application, and the context of the selected item. It is also called a shortcut menu. In environments such as Microsoft Windows, OS X, and the Unix X Window System, a context menu can be used by pressing the second mouse button (usually the right mouse button). When using a mouse with only one button, a keyboard-click combination can be used. For example, on Mac OS this can be done with Ctrl-click. PC keyboards with a Microsoft Windows key have an additional menu key that can open the context menus of MS Windows applications.

Context menus were first used in the Smalltalk environment on the Xerox Alto computer, where these menus were called pop-up menus. The NeXTSTEP operating system later developed this concept so that the main menu appeared at the mouse position when the right or middle button was pressed. This reduced the need to move the mouse pointer all over the large NeXTSTEP screens of the time.

Designing effective context menus: 10 guidelines

• Designing effective context menus: 10 guidelines | GeekNews
  • [Original] Designing Effective Contextual Menus: 10 Guidelines - NN/G
• Context menus reduce visual noise and lower interaction cost, but come with the tradeoff of weak information scent and poor discoverability
• Well suited for grouping secondary and supplementary actions tied to a specific object such as a post, photo, or calendar event; kebab (⋮) and meatball (⋯) icons are generally recognized as "more / additional actions"
• When icon size, contrast, or placement is poor, users often fail to see the icon or misunderstand its meaning, and hiding important actions turns them into hard-to-find core features, worsening the user experience
• Using them effectively requires consistent rules: include only secondary actions, place them near related content, don't hide just one or two actions, keep them distinct from the hamburger, ensure accessibility, and so on
• A well-designed context menu is a tool for simplifying layouts and increasing focus, but when overused or misused it becomes a risk that adds confusion, extra clicks, and learning burden, so it should be used with care

Context menu overview

• A context menu is a menu that collects a set of related actions tied to a specific UI element, screen area, piece of data, or application view
  • It can include actions such as Edit, Pin, Delete for a post; Share, Download, Set as Background for a photo; and Delete, Reschedule, Duplicate, Invite for a calendar event
• Such menus are usually used to keep within reach secondary functions that are needed occasionally but don't need to be visible all the time
• Triggers include right-click and two-finger trackpad click on desktop, long press in touch environments, and, increasingly often, kebab (⋮) and meatball (⋯) icons

Recognition and limits of kebab and meatball icons

• Study participants generally recognized kebab (⋮) and meatball (⋯) icons as meaning "more options / other actions are hidden here"
  • This recognition holds on both mobile and desktop, and is understood more consistently when the guidelines are followed well
  • The icon is perceived as "a switch that opens a temporarily hidden set of functions/icons"
• At the same time, these icons have weak information scent, so users end up clicking with almost no idea of what specific options lie behind them
• Cases were also observed where users didn't notice the context menu at all because the icon was too far from the content, too small, or designed with low contrast

Pros and tradeoffs of context menus

• On the plus side, context menus are a structure that helps reduce visual noise, simplify layouts, and maintain focus
• On the other hand, they come with the following usability problems
  • Hard to find (reduced findability): if the icon is small and faint or far from the task's focus area, it becomes an element that is easy to miss entirely
  • Lack of information scent: it is hard to predict what is in the menu, making it difficult to judge whether it is worth clicking
  • Potential for misunderstanding: with poor placement or usage, users mistake it for a progress indicator or carousel control
• So whether to use a context menu should be decided by balancing layout constraints, user expectations, and task priorities

Put only secondary, non-core actions in context menus

• A context menu is not the place for frequently used core actions, but for supplementary, low-priority actions
  • Recommended approach: use research-based judgment to select and hide features that are not part of the core flow but are still used fairly often
• It is important not to hide frequently used essential actions behind a context menu
  • For example, putting End Chat inside a context menu in the AT&T chat interface is a bad example of hiding a key exit action
• When important tasks are hidden behind a menu, users can't find the feature or experience repeated inconvenience in tasks they perform often

Place context menus near the content they affect

• Users interpret relationships between elements through spatial proximity, so the position of the context menu icon should make clear which object the actions belong to
• If a menu applies only to a specific element, its icon should be placed inside or right next to that element
  • If the actions apply to an entire field or an entire transaction, the icon needs to be placed near the area where the related information is grouped
• Avoid placing the icon in a random position or an out-of-place spot not connected to any element
  • As in the Ramp.com case, a small, low-contrast kebab icon set apart at the bottom right of the screen makes it hard to tell what element it is for, an example of poor discoverability and poor association alike

Ensure visibility with sufficient icon size and contrast

• Context menu icons are often rendered so subtly in dense screens or complex applications that they are weakened to the point of being invisible
• Icons should have sufficient size and contrast, and ideally remain always visible without hover
  • Recommended: follow proven visual design guidelines and use clear color contrast and distinct borders and backgrounds
• Making them visible only on hover, or making them overly faint in the name of minimalism, reduces discoverability
  • Small, low-contrast, distantly placed kebab icons like the Ramp example are easy to miss,
  • whereas the Rippling mobile app, which wraps the icon in a bordered box and combines black dots with a white background to raise contrast, is a positive example that increases tappability and information scent

Group only related actions in a context menu

• The options in a context menu should be grouped as actions that logically belong to a single object/element/level
  • For example, for a file, include only file-related actions such as Duplicate, Share, Delete
• Where possible, it is also recommended to expose some actions directly next to the menu icon, adding information scent that hints at "what kind of actions are hidden further"
• Avoid mixing global actions and element-specific actions in one menu, or throwing in unrelated actions
  • Such mixing works against clarity, findability, spatial memory, and cognitive load alike
• The Slack desktop app is a good example: the menu attached to a message hides only message-related actions, while actions dealing with the whole thread are placed elsewhere

Keep icons and behavior consistent across the interface

• Context menu icons should keep the same function, behavior, and appearance throughout the product
  • If you decide to use meatball or kebab icons for context menus, use them only for that meaning and don't reuse them for other purposes
• Avoid reuse such as using the same icon to expand hidden content in one place, call a pop-up in another, and open a side panel in yet another
  • Such use damages users' mental models and trust, and reduces learnability and memorability
• In Google search results, the behavior and position vary: the kebab icon on sponsored results opens the My Ad Center modal, while the kebab on regular results opens the right panel
  • As a result, useful actions such as Like/Block/Report/Share/Save are hidden and rarely discovered, and users find it hard to predict what will happen when they click the same icon

If the icon is ambiguous, reinforce its meaning with tooltips and labels

• Kebab and meatball icons are abstract icons with weak inherent meaning, so even a small text hint greatly improves usability
• Where possible, add a visible label or a hover tooltip that tells users specifically what type of actions the menu contains
  • For example, use clear wording that includes the target element, such as Post Actions or Message Options
• Avoid vague wording like a plain Options, or labels like Ellipses that only describe the icon's shape
  • The Patagonia example, which maps an image zoom action to a meatball icon and labels it Ellipses on hover, fails to convey meaning
• In contrast, a tooltip like the Notion desktop app's "Style, Export, and more…" on hover, which specifically hints at the kinds of actions in the menu, is a positive pattern that greatly increases information scent
  • This tooltip works by changing per context depending on the menu's contents

Use context menu icons only to indicate actions, not to expand content

• Meatball and kebab icons are perceived as signals for opening additional actions/options, so it is best not to use them to expand text or images
• For expanding partial text or enlarging images, explicit text labels such as Read more or Expand are recommended
• The Etsy review example, where a meatball icon below a review opens the full text, is a bad example lacking information scent
  • Google reviews offering the same function as a More text link is a better fit for a context-expanding action
• The kebab icon at the top of Google reviews offering only one action, Report, violates the "don't hide just one or two actions" guideline that comes later

Don't use a context menu for just one or two actions

• Where possible, when only one or a few actions are offered, it is better to expose those actions directly in the interface
• Hiding one or two options behind a menu saves almost no space and only increases click count and discoverability costs
  • Especially when well-known standard icons exist, such as "x", a trash can, or a report flag, hiding them again under a meatball/kebab brings no benefit
• In the Weather.com case, clicking the kebab icon turns it into a black button containing only a Delete button,
  • in which case the screen space used is almost the same as exposing Delete directly from the start, so there is no reason to hide it
• In contrast, the Pinterest example directly exposes important actions such as Save (top-right button) and Share (bottom-right icon) when you hover over a pin
  • This is a positive pattern that doesn't hide core actions in a context menu and makes them immediately available when needed

Don't use the hamburger icon as a context menu trigger

• The hamburger icon (☰) is widely recognized as a symbol for global/main navigation,
  • while kebab and meatball icons (⋮·⋯) have become established as a pattern meaning contextual actions belonging to a specific element or item
• It is recommended to use the hamburger icon only for the site/app's global navigation, and kebab and meatball icons for contextual actions
• Avoid placing a hamburger near content to hold contextual actions, or conversely putting global actions like account settings or site-wide preferences in a kebab or meatball
  • Such mixing blurs the meaning of each pattern and breaks users' mental models, causing hesitation and omissions
• The Banana Republic chat example shows a structure where pressing the hamburger icon at the bottom left of the chat window brings up only one contextual action, Save Transcript
  • This not only uses the hamburger as a context menu instead of global navigation, but also violates guideline 8 by hiding only one action

Always ensure keyboard and screen reader accessibility

• Context menus must be usable by people who don't use a mouse or touch, and need a structure that can be opened and navigated with a keyboard and screen reader
• Menus should open and be navigable with Tab, Enter, and arrow keys, and the items inside should also be readable by screen readers, with focus movement and activation possible
• Avoid menus that are accessible only by click or tap, or custom interactions that break standard accessibility patterns
• Accessibility-first design provides efficiency not only for users with disabilities but for power users as well, and also helps meet inclusive design standards

Conclusion

• Context menus are a powerful tool that keeps the interface simple while still offering supplementary actions when needed
  • They are especially useful as a pattern for tidying up layouts and opening additional options only when needed while staying focused on the task
• However, because their discoverability and clarity are limited, they always need to be used with care
  • Use them only for truly secondary actions, with a design that considers placement, consistency, information scent, and accessibility
• The key message is to balance visual minimalism with actual usability,
  • and context menus are most effective when used as a tool to tidy up the interface without hiding the core flow

Table of Graphical Widgets

See also

• GUI

Favorite site

• Context menu - Wikipedia