RRenDSv0.14.1
GitHubGet started

Composite

Context Menu Requires JS

A right-click menu anchored to the cursor position. Same engine as Menu — actions list with icons, shortcuts, separators, danger styling — but triggered by contextmenu events instead of a button.

About

Overview

Context menus give power users a faster path to common actions on an element they've already located. Use them in editors, file lists, design canvases — anywhere the user thinks "I want to do something to this thing."

Always provide a non-context-menu path. Touch users have no right-click. Every action in a context menu must also be reachable via a button, keyboard shortcut, or regular menu.

Live

Demo

Right-click the area below to open the context menu (touch: long-press).

Right-click anywhere in this box
 
<div id="editor-canvas" data-context="editor-menu" tabindex="0">
  Right-click this area
</div>

<ren-context-menu id="editor-menu">
  <button class="ren-menu-item" role="menuitem">Cut<span class="ren-menu-item-shortcut">⌘X</span></button>
  <button class="ren-menu-item" role="menuitem">Copy<span class="ren-menu-item-shortcut">⌘C</span></button>
  <button class="ren-menu-item" role="menuitem">Paste<span class="ren-menu-item-shortcut">⌘V</span></button>
  <hr class="ren-menu-separator">
  <button class="ren-menu-item ren-menu-item-danger" role="menuitem">Delete</button>
</ren-context-menu>

<script type="module" src="rends/components/composites/ren-context-menu/ren-context-menu.js"></script>

Reference

API

Visual classes are inherited from Menu — .ren-menu, .ren-menu-item, .ren-menu-separator, .ren-menu-item-icon, .ren-menu-item-shortcut, .ren-menu-item-danger.

Element contract

Loading the module registers <ren-context-menu>, which wires itself up on connect. The imperative entry points initContextMenu(id) / initAllContextMenus() are still exported for menus you build outside the custom element; both share one controller, so never use both on the same menu.

AttributeTypeDefaultNotes
data-contextstring (menu id)requiredAdd to each element that should trigger the context menu.
idstringautoOn the <ren-context-menu>. Must match the data-context value of its triggers; generated if omitted.
popovermanualmanualSet by the component, not by you. Manual mode keeps the menu open after the right-click gesture completes.

For full event and item documentation see the Menu API.

Inclusive by default

Accessibility

  • Trigger via contextmenu event — works for right-click, two-finger tap on Mac trackpads, and the Menu key on keyboards.
  • Keyboard fallback: Shift+F10 opens a context menu on the focused element.
  • The actions inside use the same Menu component, so arrow-key navigation, Enter to activate, and Escape to close all work.
  • Don't put exclusive functionality in a context menu — touch users won't find it.