# Context menu · MIAN

A menu that opens at the pointer on right-click, or from the keyboard with Shift+F10.

- Id: `context-menu` · Category: Overlays · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/context-menu
- Use for: right click menu, context menu.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `[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.

## Examples

### Right-click area

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/context-menu/source