Skip to main content

Overview

The Context Menu component binds a customized right-click floating menu to any element or container, complete with viewport boundary collision protection, keyboard shortcuts, and ESC dismissal.

Right-Click Trigger Area

Right-click (or secondary tap on touch screens) anywhere inside the gray dashed box below to open the custom contextual menu:

🖱️
Right-click anywhere inside this target area

The floating menu opens at your cursor coordinates and stays safely inside the viewport.

  • Quick Actions
<!-- Target area -->
<div data-boodoo-toggle="context-menu" data-boodoo-target="#myContextMenu">
  <p><span>Right-click me</span></p>
</div>

<!-- Floating context menu -->
<ul class="context-menu" id="myContextMenu">
  <li class="context-menu-header"><span>Actions</span></li>
  <li class="context-menu-item">
    <button type="button" class="context-menu-link">
      <span class="context-menu-icon">📋</span>
      <span>Copy</span>
      <span class="context-menu-shortcut"><kbd>Ctrl+C</kbd></span>
    </button>
  </li>
  <li class="context-menu-divider"></li>
  <li class="context-menu-item">
    <button type="button" class="context-menu-link text-danger">
      <span class="context-menu-icon">🗑️</span>
      <span>Delete</span>
    </button>
  </li>
</ul>