Context Menu

Right-click context menu.

Usage

<w-context-menu>
  <w-slot trigger>
    <div>Right-click in this area</div>
  </w-slot>
  <w-slot body>
    <div>
      <w-slot item name="cut"><button>Cut</button></w-slot>
      <w-slot item name="copy"><button>Copy</button></w-slot>
      <w-slot item name="paste"><button>Paste</button></w-slot>
    </div>
  </w-slot>
</w-context-menu>

Props

Prop	Type	Default	Description
open	boolean	false	Whether menu is visible

Slots

Slot	Element	Description
trigger	Any	Area that responds to right-click
content	Container	Menu content
item	Button	Menu items

Events

Event	Detail	Description
select	{ item }	Item selected

Keyboard

Key	Action
ArrowDown	Next item
ArrowUp	Previous item
Enter	Select item
Escape	Close menu

Styling

Same selectors as Menu — the panel is teleported and gets role="menu"; items get role="menuitem". The library positions the panel at the cursor (you don't need to set position: fixed yourself).

[role="menu"] {
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  padding: 0.25rem 0;
}

[role="menuitem"] {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  cursor: pointer;
}

[role="menuitem"]:hover,
[role="menuitem"]:focus {
  background: #f0f0f0;
}

Accessibility

• Same accessibility features as regular Menu
• Opens at cursor position
• Full keyboard navigation