Context Menu — RenDS Components

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>

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

<script type="module">
  import { initContextMenu } from './ren-context-menu.js';
  initContextMenu('editor-menu');
</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.

Initializer contract

Attribute	Type	Default	Notes
`data-context`	string (menu id)	required	Add to each element that should trigger the context menu.
`id`	string	required	The popover element id passed to `initContextMenu(id)`.
`popover`	manual	manual	Uses manual popover mode so the menu stays 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.