--- title: "Context menu UI: anatomy, variants and examples | Kombai" description: "A context menu opens at the pointer on right-click or long-press and lists the actions for the thing under it." canonical_url: https://kombai.com/glossary/context-menu/ author: "The Kombai Team" --- # Context menu A context menu opens at the pointer on right-click or long-press and lists the actions for the thing under it. - Also called: right-click menu - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/context-menu/) - [Sgraffito](https://kombai.com/gallery/inspirations/context-menu-web-28/) (Web) - [Harbour Static](https://kombai.com/gallery/inspirations/context-menu-web-42/) (Web) - [Marlowe](https://kombai.com/gallery/inspirations/action-option-ios-74/) (Mobile) ## What is a context menu? A context menu is a list of actions that opens right where people right-click, or where they press and hold on a touch screen. Its actions belong to the item under the pointer, like a file, a cell or a message. It has no button of its own, so it works as a shortcut to actions that also live somewhere visible. - It opens at the pointer or next to the pressed item, and closes after one pick or a click elsewhere. - Its items change with the target: a cell gets table actions, an image gets image actions. ## When to use context menu - **Many objects, many actions.** Canvases, file browsers and spreadsheets where each item has its own set of actions. - **Speed for frequent users.** Right-click saves a trip to a toolbar or an overflow button. - **Long-press on mobile.** Quick actions on a row, photo or message without opening it. ## When not to use one - **As the only way to an action.** Many people never right-click. Put every action on a visible button or menu too. - **Ordinary links and text.** Replacing the browser menu takes away copy, open in new tab and other tools people expect. - **One or two actions.** Show them as buttons on the item instead. ## Anatomy 1. **Target**: The item that was clicked 2. **Menu panel**: Opens at the pointer 3. **Menu item**: An action, with its shortcut 4. **Submenu**: More choices off one item 5. **Separator**: Groups related actions 6. **Destructive item**: Delete, last and in red ## Variants We sorted every context menu design in the Kombai gallery and found five patterns. ### 1. Long editor menus Design and diagram tools list every object action, grouped by separators, with the keyboard shortcut beside each one. - [Handheld - Directory](https://kombai.com/gallery/inspirations/context-menu-web-15/) (Web) - [Catoptra](https://kombai.com/gallery/inspirations/context-menu-web-31/) (Web) - [Kilnwright](https://kombai.com/gallery/inspirations/context-menu-web-49/) (Web) ### 2. Menus with submenus A chevron on an item opens a second menu beside it, for choices like owner, status, extensions or details. - [Syzygram](https://kombai.com/gallery/inspirations/context-menu-web-22/) (Web) - [Cleatly](https://kombai.com/gallery/inspirations/context-menu-web-41/) (Web) - [updates](https://kombai.com/gallery/inspirations/context-menu-web-2/) (Web) ### 3. Short item menus A handful of actions for one image, card or board, like copy link, download or delete. - [Chalcedon](https://kombai.com/gallery/inspirations/context-menu-web-1/) (Web) - [Everything](https://kombai.com/gallery/inspirations/context-menu-web-44/) (Web) - [Tessera](https://kombai.com/gallery/inspirations/action-option-ios-73/) (Mobile) ### 4. Long-press menus on mobile The pressed item lifts above a dimmed screen with a list of actions next to it. - [Vireo](https://kombai.com/gallery/inspirations/action-option-ios-82/) (Mobile) - [Quoinhouse](https://kombai.com/gallery/inspirations/action-option-ios-58/) (Mobile) - [Savory](https://kombai.com/gallery/inspirations/social-links-ios-21/) (Mobile) ### 5. Table and spreadsheet menus Right-clicking a cell or a column header offers insert, sort, filter and format actions for that row or column. - [Rimefall](https://kombai.com/gallery/inspirations/context-menu-web-4/) (Web) - [Q3 Revenue Plan](https://kombai.com/gallery/inspirations/context-menu-web-32/) (Web) - [Brackline](https://kombai.com/gallery/inspirations/context-menu-web-46/) (Web) ## Where context menus show up ### Files and media libraries Open, rename, share, export and delete on clips, drafts and documents. - [Dry Season](https://kombai.com/gallery/inspirations/context-menu-web-20/) (Web) - [Grainpress](https://kombai.com/gallery/inspirations/context-menu-web-18/) (Web) - [Drafts](https://kombai.com/gallery/inspirations/context-menu-web-11/) (Web) ### Issue trackers and lists Status, owner, copy link and delete on a ticket, contact or card row. - [Saltmere](https://kombai.com/gallery/inspirations/context-menu-web-45/) (Web) - [People](https://kombai.com/gallery/inspirations/context-menu-web-43/) (Web) - [Graticule](https://kombai.com/gallery/inspirations/context-menu-web-6/) (Web) ### Chat and communities Actions on a member, a channel or a message being sent, like mute, pin or send silently. - [Fernhollow](https://kombai.com/gallery/inspirations/context-menu-web-10/) (Web) - [Wrenhollow Studio](https://kombai.com/gallery/inspirations/context-menu-web-29/) (Web) - [Skerry](https://kombai.com/gallery/inspirations/context-menu-web-14/) (Web) ## Context menu vs similar components | | [Context menu](https://kombai.com/glossary/context-menu/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Action sheet](https://kombai.com/glossary/action-sheet/) | |---|---|---|---| | Opens from | Right-click or long-press on an item | A visible button | A button on a phone | | Sits | At the pointer or the pressed item | Under or beside its button | Along the bottom edge | | Best for | Shortcuts for frequent users | Actions anyone can find | A few actions on mobile | ## Build notes - Listen for the contextmenu event, which fires on right-click and on the keyboard Menu key or Shift+F10, call preventDefault() and open your menu at the event position. - Keep the menu inside the viewport: flip it up or left when it would run off the edge. - Give the panel role="menu" and each action role="menuitem". Move focus to the first item when it opens. - Up and Down Arrow move, Right Arrow opens a submenu, Left Arrow and Escape close it, and Enter runs the item. - Close the menu on a pick, a click outside, Escape, scroll or window blur, and return focus to the target. - Every action in the menu should also be reachable from a visible button, a toolbar or a ••• menu. ## FAQ ### What's the difference between a context menu and a dropdown menu? A dropdown menu opens from a button people can see. A context menu has no button: it opens on right-click or long-press, at the item people are pointing at, and shows actions for that item. ### How do keyboard users open a context menu? With the Menu key or Shift+F10 on Windows and Linux. Browsers fire the same contextmenu event for these as for a right-click, so one handler covers both, as long as the target can take focus. ### Should a web app replace the browser context menu? Only on items the app owns, like canvas objects, files or table cells. Leave the browser's menu on links, text and inputs, where people expect copy, paste and open in new tab. ### How long should a context menu be? Short enough to scan. Put the most used actions first, group the rest with separators, move rare choices into submenus and keep Delete at the bottom. ## Related terms - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) - [Action sheet](https://kombai.com/glossary/action-sheet/) - [Popover](https://kombai.com/glossary/popover/) - [Command palette](https://kombai.com/glossary/command-palette/) ## References - [Apple Human Interface Guidelines: Context menus](https://developer.apple.com/design/human-interface-guidelines/context-menus) - [WAI-ARIA Authoring Practices: Menu and menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) - [MDN: Element contextmenu event](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event)