Context Menu
A native web component (zero dependencies) that wraps a region and, on receiving the contextmenu event (right-click), opens a menu panel as a native popover positioned at the pointer coordinates. Use it when you need to offer contextual actions on an element or area, with keyboard navigation, light dismiss and ESC-to-close already included. The items are pura-menu-item elements passed through the "menu" slot.
Preview
<pura-context-menu id="cm-demo">
<div style="display:grid;place-items:center;height:160px;border:1px dashed var(--pura-border);border-radius:var(--pura-radius);color:var(--pura-muted)">
Right-click here
</div>
<pura-menu-item slot="menu">
Back
<span slot="shortcut">Ctrl+[</span>
</pura-menu-item>
<pura-menu-item slot="menu">
Reload
<span slot="shortcut">Ctrl+R</span>
</pura-menu-item>
<pura-menu-item slot="menu" disabled>Save as...</pura-menu-item>
<pura-menu-item slot="menu" variant="danger">Delete</pura-menu-item>
</pura-context-menu>
<script type="module">
const cm = document.getElementById("cm-demo");
cm.addEventListener("select", (e) => {
console.log("Selected item:", e.target.textContent.trim());
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
target | boolean | false | Makes the host itself the contextmenu target instead of the default slot region. |
disabled | boolean | false | Disables opening the menu on contextmenu. |
variant | string (default | danger) | default | Attribute of pura-menu-item: item style, danger uses the danger color. |
inset | boolean | false | Attribute of pura-menu-item: adds left indentation to align items without an icon. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/context-menu.js"></script>import "./pura/lib/context-menu.js";