Browse Components

Context Menu

Contextual actions at the pointer, with keyboard and touch access.

Basic

Right-click the region, press Shift+F10 while focused, or use File Actions. On touch, hold briefly without scrolling.

Project files

View Code

HTML

<div
  class="panel stack"
  tabindex="0"
  data-menu
  data-context-menu
  popovertarget="file-context-menu"
  aria-label="Project files"
  aria-describedby="file-context-help"
>
  <strong>
    Project files
  </strong>
  <p id="file-context-help">
    Right-click or touch and hold here for actions. Keyboard: Shift+F10.
  </p>
  <button
    class="btn secondary"
    type="button"
    data-context-trigger
    popovertarget="file-context-menu"
  >
    File Actions
  </button>
  <div
    class="menu popup-panel"
    id="file-context-menu"
    popover="auto"
    aria-label="File actions"
  >
    <a href="/components/button">
      Open Components
    </a>
    <a href="/docs/components">
      Read Guide
    </a>
    <hr>
    <button type="button" disabled>
      Rename (Unavailable)
    </button>
  </div>
</div>

With icons

Leading icons help identify actions. Labels remain visible, and decorative icons are hidden from assistive technology.

Project files

View Code

HTML

<div
  class="panel stack"
  tabindex="0"
  data-menu
  data-context-menu
  popovertarget="file-context-menu"
  aria-label="Project files"
  aria-describedby="file-context-help"
>
  <strong>
    Project files
  </strong>
  <p id="file-context-help">
    Right-click or touch and hold here for actions. Keyboard: Shift+F10.
  </p>
  <button
    class="btn secondary"
    type="button"
    data-context-trigger
    popovertarget="file-context-menu"
  >
    File Actions
  </button>
  <div
    class="menu popup-panel"
    id="file-context-menu"
    popover="auto"
    aria-label="File actions"
  >
    <a href="/components/button">
      <svg
        class="icon"
        aria-hidden="true"
        focusable="false"
        xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <rect x="3" y="3" width="7" height="7" rx="1.5">
        </rect>
        <rect x="14" y="3" width="7" height="7" rx="1.5">
        </rect>
        <rect x="3" y="14" width="7" height="7" rx="1.5">
        </rect>
        <rect x="14" y="14" width="7" height="7" rx="1.5">
        </rect>
      </svg>
      <span>
        Open Components
      </span>
    </a>
    <a href="/docs/components">
      <svg
        class="icon"
        aria-hidden="true"
        focusable="false"
        xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Zm0 0v3a2 2 0 0 0 2 2h3M8 13h8M8 17h6">
        </path>
      </svg>
      <span>
        Read Guide
      </span>
    </a>
    <hr>
    <button type="button" disabled>
      <svg
        class="icon"
        aria-hidden="true"
        focusable="false"
        xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="m15 6 3 3M4 20l1-4L16 5a2.1 2.1 0 0 1 3 0 2.1 2.1 0 0 1 0 3L8 19l-4 1Z">
        </path>
      </svg>
      <span>
        Rename (Unavailable)
      </span>
    </button>
  </div>
</div>

Right to left

Hebrew labels and logical alignment use the same shared menu behavior.

קובצי הפרויקט

View Code

HTML

<div
  class="panel stack"
  dir="rtl"
  lang="he"
  tabindex="0"
  data-menu
  data-context-menu
  popovertarget="he-context-menu"
  aria-label="קובצי הפרויקט"
  aria-describedby="he-context-help"
>
  <strong>
    קובצי הפרויקט
  </strong>
  <p id="he-context-help">
    לחצו לחיצה ימנית או לחיצה ממושכת לפעולות. מקלדת: Shift+F10.
  </p>
  <button
    class="btn secondary"
    type="button"
    data-context-trigger
    popovertarget="he-context-menu"
  >
    פעולות קובץ
  </button>
  <div
    class="menu popup-panel"
    id="he-context-menu"
    popover="auto"
    aria-label="פעולות קובץ"
  >
    <a href="/components/button">
      פתיחת רכיבים
    </a>
    <a href="/docs/components">
      קריאת המדריך
    </a>
    <hr>
    <button type="button" disabled>
      שינוי שם (לא זמין)
    </button>
  </div>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.css panel.css button.css popup.css menu.css popup.js menu.js

Add to your page

<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/panel.css">
<link rel="stylesheet" href="/library/assets/button.css">
<link rel="stylesheet" href="/library/assets/popup.css">
<link rel="stylesheet" href="/library/assets/menu.css">
<script defer src="/library/assets/popup.js"></script>
<script defer src="/library/assets/menu.js"></script>

13,681 bytes CSS including base · 12,503 bytes runtime JavaScript

Usage

Discoverable actions

Keep a visible action button alongside right-click and long-press. Do not hide essential actions behind a gesture. Native context menus remain available outside the target and within editable fields.

Shared menu behavior

Use Menu markup for links, buttons, separators, disabled actions and nested submenus. Popup positioning keeps actions inside the viewport. Escape returns focus to the context region.

Lifecycle

Context Menu shares layoutMenu.refresh(root) and destroy(region). Application code owns action handlers and file operations.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.