ContextMenu

App

Right-click context menu. Wraps any element as a trigger. Supports item groups, keyboard shortcuts, separators, danger items, and disabled items. Positions itself via viewport-aware boundary detection, auto-flips when near screen edges. Full keyboard navigation: ↑↓ arrows, Enter, Escape.

Preview

Right-click anywhere in this area

Code

<%- include('modules/app/ContextMenu', {
  children: 'Right-click anywhere in this area',
  items: [
    { label: 'Cut',       icon: '', shortcut: '⌘X' },
    { label: 'Copy',      icon: '', shortcut: '⌘C' },
    { label: 'Paste',     icon: '', shortcut: '⌘V' },
    { type: 'separator' },
    { label: 'Copy link', icon: '', shortcut: '⌘⇧C' },
    { type: 'separator' },
    { label: 'Rename',    icon: '' },
    { label: 'Delete',    icon: '', shortcut: '⌫', danger: true },
  ]
}) %>

Preview

Report Q1.pdf

Design System.fig

README.md

Code

<% files.forEach(function(file) { %>
  <%- include('modules/app/ContextMenu', {
    children: fileCardHtml(file),
    items: [
      { type: 'group', label: 'Actions' },
      { label: 'Open',     icon: '' },
      { label: 'Download', icon: '', shortcut: '⌘D' },
      { label: 'Share',    icon: '', shortcut: '⌘⇧S' },
      { type: 'separator' },
      { type: 'group', label: 'Organise' },
      { label: 'Move to…', icon: '' },
      { label: 'Add tag',  icon: '' },
      { type: 'separator' },
      { label: 'Delete',   icon: '', danger: true },
    ]
  }) %>
<% }); %>

Preview

feature/context-menu (right-click)

Code

<%- include('modules/app/ContextMenu', {
  children: branchRowHtml,
  items: [
    { label: 'View diff',        icon: '' },
    { label: 'Copy branch name', icon: '', shortcut: '⌘C' },
    { type: 'separator' },
    { label: 'Merge into main',  icon: '', disabled: true },
    { label: 'Cherry-pick',                                                                 disabled: true },
    { type: 'separator' },
    { label: 'Delete branch',    icon: '', danger: true },
  ]
}) %>

<%
  var _id       = locals.id       || 'ctx-' + Math.random().toString(36).substr(2, 9);
  var _items    = locals.items    || [];
  var _disabled = !!locals.disabled;
  var _class    = locals.className || '';
%>
"
>
  <%- locals.children || '' %>



  <% _items.forEach(function(item) { %>
    <% if (item.type === 'separator') { %>
      

    <% } else if (item.type === 'group') { %>
      
        <%= item.label %>
      

    <% } else {
         var _isDanger   = !!item.danger;
         var _isDisabled = !!item.disabled;
         var _colorClass = _isDanger
           ? 'text-error hover:bg-error-subtle focus-visible:bg-error-subtle'
           : 'text-text-primary hover:bg-surface-overlay focus-visible:bg-surface-overlay';
         var _iconColor  = _isDanger ? 'text-error' : 'text-text-secondary';
    %>
      
    <% } %>
  <% }); %>

ContextMenu

Text editor — clipboard + format actions

File manager — groups + shortcut hint

Code branch — some items disabled