Overlays menucontextoverlay

Custom Context Menu

Right-click menu replacement with custom actions and styling.

Copy Link
Duplicate
Delete Item

Usage

Copy the full block below to use this component with its imports.

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

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

Manual Installation

If you are not using the npm package, create a new file src/components/lib/CustomContextMenu.astro and paste the following code:

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>

Quick Info

Category
Overlays
Filename
CustomContextMenu.astro
Dependencies
None — pure Astro + CSS
Tags
menucontextoverlay