1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas menucontextoverlay

Custom Context Menu

Menú contextual de opciones rápidas que se posiciona según las coordenadas del ratón.

Copy Link
Duplicate
Delete Item

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { CustomContextMenu } from 'astro-component-kit';
---

<ContextMenuOverlay>Content</ContextMenuOverlay>
--- import { CustomContextMenu } from 'astro-component-kit'; --- <ContextMenuOverlay>Content</ContextMenuOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/CustomContextMenu.astro:

astro 
---
---
<div class="ctx-menu">
  <div class="ctx-group">
    <div class="ctx-item">Copy Link</div>
    <div class="ctx-item">Duplicate</div>
  </div>
  <hr />
  <div class="ctx-item danger">Delete Item</div>
</div>
<style>
  .ctx-menu { width: 200px; background: #111; border: 1px solid #333; border-radius: 10px; padding: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: fixed; top: 100px; left: 100px; z-index: 5000; }
  .ctx-item { padding: 8px 12px; font-size: 0.85rem; color: #e2e8f0; border-radius: 6px; cursor: pointer; transition: 0.2s; }
  .ctx-item:hover { background: #6366f1; color: #fff; }
  .danger:hover { background: #ef4444 !important; }
  hr { border: none; border-top: 1px solid #222; margin: 4px 0; }
</style>
--- --- <div class="ctx-menu"> <div class="ctx-group"> <div class="ctx-item">Copy Link</div> <div class="ctx-item">Duplicate</div> </div> <hr /> <div class="ctx-item danger">Delete Item</div> </div> <style> .ctx-menu { width: 200px; background: #111; border: 1px solid #333; border-radius: 10px; padding: 4px; box-shadow: 0 15px 40px rgba(0,0,0,0.6); position: fixed; top: 100px; left: 100px; z-index: 5000; } .ctx-item { padding: 8px 12px; font-size: 0.85rem; color: #e2e8f0; border-radius: 6px; cursor: pointer; transition: 0.2s; } .ctx-item:hover { background: #6366f1; color: #fff; } .danger:hover { background: #ef4444 !important; } hr { border: none; border-top: 1px solid #222; margin: 4px 0; } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
CustomContextMenu.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
menucontextoverlay