Context menu
A menu that opens at the pointer on right-click, or from the keyboard with Shift+F10.
Right-click area
Right-click here (or focus and press Shift+F10)
<div class="mn-context-area mn-context-area-dashed" data-mn-context="ctx-1" aria-label="Canvas. Right-click or press Shift+F10 for actions">Right-click here (or focus and press Shift+F10)</div>
<div class="mn-menu" id="ctx-1" popover>
<button class="mn-menu-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1"/></svg> Copy</button>
<button class="mn-menu-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16v4Z"/><path d="m14 6 4 4"/></svg> Rename</button>
<button class="mn-menu-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v12M7 11l5 5 5-5"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg> Download</button>
<div class="mn-menu-sep" role="separator"></div>
<button class="mn-menu-item mn-danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg> Delete</button>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/context-menu.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| [data-mn-context="menu-id"] | The area that opens the menu. |
| mn-menu[popover] | The menu: the same markup as the dropdown menu. |
| mn-context-area-dashed | A dashed drop-zone look for demos and canvases. |
Accessibility
- The area is focusable and announces aria-haspopup="menu". Shift+F10 or the Menu key opens it at the area.
- Menu keyboard support (arrows, Home/End, typeahead, Escape) comes from the dropdown module; focus returns to the area on close.
- Right-click is not discoverable: offer the same actions elsewhere too.