Create Contextual Right-Click Menus with Vanilla JavaScript

CRCMenu.js is a lightweight JavaScript library for creating responsive, animated, customizable context menus styled with your own CSS or TailwindCSS.

This library blocks the default right-click behavior and displays custom menu options with smooth animations and responsive positioning.

The menu automatically detects different interaction contexts and displays relevant options accordingly.

Features

• Context-Aware Menus: The options displayed change depending on whether the user clicks on a link, selected text, an input field, or an empty area.
• Core Actions: Includes built-in functions for copying text, pasting from the clipboard, refreshing the page, and navigating to a predefined URL.
• No Dependencies: Built with pure HTML, CSS, and JavaScript.
• Dual Styling Options: Provides a standard version with a dedicated CSS file (CRCMenu-CSS) and a version for projects already using Tailwind CSS (CRCMenu-Tailwind).
• Simple Customization: Menu items and functions can be modified by editing the JavaScript and CSS files directly.

See it in action:

How to use it:

1. Download and extract the downloaded file to your project directory.

2. Choose between two versions:

• CRCMenu-CSS/ – Pure CSS implementation
• CRCMenu-Tailwind/ – Tailwind CSS version

3. For the pure CSS version, include the files in your HTML:

<link rel="stylesheet" href="rcm.css">
<script src="rcm.js"></script>

4. For the Tailwind version:

<script src="https://cdn.tailwindcss.com"></script>
<script src="rcm-tailwind.js"></script>

5. Modify the goToMain() function in the JavaScript file to set your desired navigation target:

function goToMain() {
  window.location.href = "https://your-website.com";
}

The post Create Contextual Right-Click Menus with Vanilla JavaScript appeared first on CSS Script.