Account Settings
FIRST NAME
[Loading...]
LAST NAME
[Loading...]
EMAIL
[Loading...]
ID
[Loading...] For support purposes only
Share AgencyGenius

Step 1: Add HTML, Css & JavaScript

Code
Html
Css
Javascript
Combined
 <!-- Custom Right-Click Context Menu - Start --> 
 <div id="custom-context-menu-wrapper"> 
 <!-- Context Menu Container (initially hidden) --> 
 <div id="custom-context-menu" class="hidden"> 
 <!-- Menu items will be dynamically generated here --> 
 <ul id="context-menu-items"></ul> 
 </div> 
 </div> 
 <!-- Custom Right-Click Context Menu - End --> 

 /* Reset default styles for the menu */ 
 #custom-context-menu-wrapper { 
 font-family: inherit; 
 } 
  
 /* Main context menu styling */ 
 #custom-context-menu { 
 position: fixed; 
 z-index: 1000; 
 background-color: white; 
 border-radius: 10px; 
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
 min-width: 150px; 
 display: block; 
 } 
  
 /* Hidden state */ 
 #custom-context-menu.hidden { 
 display: none; 
 } 
  
 /* Menu list styling */ 
 #custom-context-menu ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 overflow: hidden; 
 border-radius: 10px; 
 } 
  
 /* Menu item styling */ 
 #custom-context-menu li { 
 padding: 0; 
 margin: 0; 
 } 
  
 /* First and last menu items should maintain border radius */ 
 #custom-context-menu li:first-child a { 
 border-top-left-radius: 10px; 
 border-top-right-radius: 10px; 
 } 
  
 #custom-context-menu li:last-child a { 
 border-bottom-left-radius: 10px; 
 border-bottom-right-radius: 10px; 
 } 
  
 /* Menu link styling */ 
 #custom-context-menu li a { 
 display: block; 
 padding: 10px 15px; 
 text-decoration: none; 
 color: #333; 
 transition: background-color 0.2s; 
 font-weight: normal; 
 font-size: 16px; 
 line-height: 1.5; 
 } 
  
 /* Hover effect */ 
 #custom-context-menu li a:hover { 
 background-color: #f5f5f5; 
 } 
  
 /* Divider styling */ 
 #custom-context-menu li.divider { 
 height: 1px; 
 background-color: #e0e0e0; 
 margin: 5px 0; 
 } 

 // Custom Context Menu Script 
 (function() { 
 // Configuration - Customize these options as needed 
 const config = { 
 // Set to true to enable the custom context menu site-wide 
 // Set to false to only enable it on elements with class 'context-menu-enabled' 
 globalEnable: true, 
  
 // Menu items configuration - customize these as needed 
 menuItems: [ 
 { text: 'Home', url: 'https://www.agencygenius.co/' }, 
 { text: 'Pricing', url: 'https://www.agencygenius.co/pricing' }, 
 { text: 'FAQ', url: 'https://www.agencygenius.co/faq' }, 
 { divider: true }, 
 { text: 'Login', url: 'https://www.agencygenius.co/?msopen=/member/sign_in' }, 
 { text: 'Contact Us', url: 'https://www.agencygenius.co/general-enquires' } 
 ] 
 }; 
  
 // Get references to DOM elements 
 const contextMenu = document.getElementById('custom-context-menu'); 
 const menuItemsContainer = document.getElementById('context-menu-items'); 
  
 // Initialize menu items from configuration 
 function initializeMenuItems() { 
 // Clear existing items 
 menuItemsContainer.innerHTML = ''; 
  
 // Add items from configuration 
 config.menuItems.forEach(item => { 
 const li = document.createElement('li'); 
  
 if (item.divider) { 
 // Add a divider 
 li.className = 'divider'; 
 } else { 
 // Add a menu item with link 
 const a = document.createElement('a'); 
 a.href = item.url; 
 a.textContent = item.text; 
  
 // Option to open in new tab 
 if (item.newTab) { 
 a.target = '_blank'; 
 a.rel = 'noopener noreferrer'; 
 } 
  
 li.appendChild(a); 
 } 
  
 menuItemsContainer.appendChild(li); 
 }); 
 } 
  
 // Function to show the context menu at specified position 
 function showContextMenu(x, y) { 
 // Position the menu at click coordinates 
 contextMenu.style.left = `${x}px`; 
 contextMenu.style.top = `${y}px`; 
  
 // Show the menu 
 contextMenu.classList.remove('hidden'); 
  
 // Check if menu goes outside viewport and adjust if needed 
 const menuRect = contextMenu.getBoundingClientRect(); 
 const windowWidth = window.innerWidth; 
 const windowHeight = window.innerHeight; 
  
 if (menuRect.right > windowWidth) { 
 contextMenu.style.left = `${windowWidth - menuRect.width - 5}px`; 
 } 
  
 if (menuRect.bottom > windowHeight) { 
 contextMenu.style.top = `${windowHeight - menuRect.height - 5}px`; 
 } 
 } 
  
 // Function to hide the context menu 
 function hideContextMenu() { 
 contextMenu.classList.add('hidden'); 
 } 
  
 // Listen for right-click event 
 document.addEventListener('contextmenu', function(event) { 
 // Check if we should enable the custom context menu 
 if (config.globalEnable || event.target.closest('.context-menu-enabled')) { 
 // Prevent default context menu 
 event.preventDefault(); 
  
 // Show our custom context menu 
 showContextMenu(event.clientX, event.clientY); 
 } 
 }); 
  
 // Hide context menu when clicking elsewhere 
 document.addEventListener('click', function() { 
 hideContextMenu(); 
 }); 
  
 // Hide context menu when pressing escape key 
 document.addEventListener('keydown', function(event) { 
 if (event.key === 'Escape') { 
 hideContextMenu(); 
 } 
 }); 
  
 // Prevent the menu from closing when clicking inside it 
 contextMenu.addEventListener('click', function(event) { 
 // Don't close menu when clicking inside it 
 event.stopPropagation(); 
  
 // But do close it after a link is clicked 
 if (event.target.tagName === 'A') { 
 hideContextMenu(); 
 } 
 }); 
  
 // Initialize the menu when the DOM is fully loaded 
 document.addEventListener('DOMContentLoaded', function() { 
 initializeMenuItems(); 
 }); 
  
 // Initialize immediately if document is already loaded 
 if (document.readyState === 'complete' || document.readyState === 'interactive') { 
 initializeMenuItems(); 
 } 
 })(); 

 <div id="snippet-z6eucskn"> 
 <!-- HTML SECTION START --> 
 <!-- Custom Right-Click Context Menu - Start --> 
 <div id="custom-context-menu-wrapper"> 
 <!-- Context Menu Container (initially hidden) --> 
 <div id="custom-context-menu" class="hidden"> 
 <!-- Menu items will be dynamically generated here --> 
 <ul id="context-menu-items"></ul> 
 </div> 
 </div> 
 <!-- Custom Right-Click Context Menu - End --> 
 <!-- HTML SECTION END --> 
  
 <!-- CSS SECTION START --> 
 <style> 
 /* Reset default styles for the menu */ 
 #custom-context-menu-wrapper { 
 font-family: inherit; 
 } 
  
 /* Main context menu styling */ 
 #custom-context-menu { 
 position: fixed; 
 z-index: 1000; 
 background-color: white; 
 border-radius: 10px; 
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
 min-width: 150px; 
 display: block; 
 } 
  
 /* Hidden state */ 
 #custom-context-menu.hidden { 
 display: none; 
 } 
  
 /* Menu list styling */ 
 #custom-context-menu ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 overflow: hidden; 
 border-radius: 10px; 
 } 
  
 /* Menu item styling */ 
 #custom-context-menu li { 
 padding: 0; 
 margin: 0; 
 } 
  
 /* First and last menu items should maintain border radius */ 
 #custom-context-menu li:first-child a { 
 border-top-left-radius: 10px; 
 border-top-right-radius: 10px; 
 } 
  
 #custom-context-menu li:last-child a { 
 border-bottom-left-radius: 10px; 
 border-bottom-right-radius: 10px; 
 } 
  
 /* Menu link styling */ 
 #custom-context-menu li a { 
 display: block; 
 padding: 10px 15px; 
 text-decoration: none; 
 color: #333; 
 transition: background-color 0.2s; 
 font-weight: normal; 
 font-size: 16px; 
 line-height: 1.5; 
 } 
  
 /* Hover effect */ 
 #custom-context-menu li a:hover { 
 background-color: #f5f5f5; 
 } 
  
 /* Divider styling */ 
 #custom-context-menu li.divider { 
 height: 1px; 
 background-color: #e0e0e0; 
 margin: 5px 0; 
 } 
 </style> 
 <!-- CSS SECTION END --> 
  
 <!-- JAVASCRIPT SECTION START --> 
 <script> 
 // Custom Context Menu Script 
 (function() { 
 // Configuration - Customize these options as needed 
 const config = { 
 // Set to true to enable the custom context menu site-wide 
 // Set to false to only enable it on elements with class 'context-menu-enabled' 
 globalEnable: true, 
  
 // Menu items configuration - customize these as needed 
 menuItems: [ 
 { text: 'Home', url: 'https://www.agencygenius.co/' }, 
 { text: 'Pricing', url: 'https://www.agencygenius.co/pricing' }, 
 { text: 'FAQ', url: 'https://www.agencygenius.co/faq' }, 
 { divider: true }, 
 { text: 'Login', url: 'https://www.agencygenius.co/?msopen=/member/sign_in' }, 
 { text: 'Contact Us', url: 'https://www.agencygenius.co/general-enquires' } 
 ] 
 }; 
  
 // Get references to DOM elements 
 const contextMenu = document.getElementById('custom-context-menu'); 
 const menuItemsContainer = document.getElementById('context-menu-items'); 
  
 // Initialize menu items from configuration 
 function initializeMenuItems() { 
 // Clear existing items 
 menuItemsContainer.innerHTML = ''; 
  
 // Add items from configuration 
 config.menuItems.forEach(item => { 
 const li = document.createElement('li'); 
  
 if (item.divider) { 
 // Add a divider 
 li.className = 'divider'; 
 } else { 
 // Add a menu item with link 
 const a = document.createElement('a'); 
 a.href = item.url; 
 a.textContent = item.text; 
  
 // Option to open in new tab 
 if (item.newTab) { 
 a.target = '_blank'; 
 a.rel = 'noopener noreferrer'; 
 } 
  
 li.appendChild(a); 
 } 
  
 menuItemsContainer.appendChild(li); 
 }); 
 } 
  
 // Function to show the context menu at specified position 
 function showContextMenu(x, y) { 
 // Position the menu at click coordinates 
 contextMenu.style.left = `${x}px`; 
 contextMenu.style.top = `${y}px`; 
  
 // Show the menu 
 contextMenu.classList.remove('hidden'); 
  
 // Check if menu goes outside viewport and adjust if needed 
 const menuRect = contextMenu.getBoundingClientRect(); 
 const windowWidth = window.innerWidth; 
 const windowHeight = window.innerHeight; 
  
 if (menuRect.right > windowWidth) { 
 contextMenu.style.left = `${windowWidth - menuRect.width - 5}px`; 
 } 
  
 if (menuRect.bottom > windowHeight) { 
 contextMenu.style.top = `${windowHeight - menuRect.height - 5}px`; 
 } 
 } 
  
 // Function to hide the context menu 
 function hideContextMenu() { 
 contextMenu.classList.add('hidden'); 
 } 
  
 // Listen for right-click event 
 document.addEventListener('contextmenu', function(event) { 
 // Check if we should enable the custom context menu 
 if (config.globalEnable || event.target.closest('.context-menu-enabled')) { 
 // Prevent default context menu 
 event.preventDefault(); 
  
 // Show our custom context menu 
 showContextMenu(event.clientX, event.clientY); 
 } 
 }); 
  
 // Hide context menu when clicking elsewhere 
 document.addEventListener('click', function() { 
 hideContextMenu(); 
 }); 
  
 // Hide context menu when pressing escape key 
 document.addEventListener('keydown', function(event) { 
 if (event.key === 'Escape') { 
 hideContextMenu(); 
 } 
 }); 
  
 // Prevent the menu from closing when clicking inside it 
 contextMenu.addEventListener('click', function(event) { 
 // Don't close menu when clicking inside it 
 event.stopPropagation(); 
  
 // But do close it after a link is clicked 
 if (event.target.tagName === 'A') { 
 hideContextMenu(); 
 } 
 }); 
  
 // Initialize the menu when the DOM is fully loaded 
 document.addEventListener('DOMContentLoaded', function() { 
 initializeMenuItems(); 
 }); 
  
 // Initialize immediately if document is already loaded 
 if (document.readyState === 'complete' || document.readyState === 'interactive') { 
 initializeMenuItems(); 
 } 
 })(); 
 </script> 
 <!-- JAVASCRIPT SECTION END --> 
 </div>
Implementation

The Custom Right-Click Context Menu creates an elegant navigation alternative that appears when users right-click anywhere on your website. When triggered, it displays a clean, styled menu with links to key pages on your site, replacing the default browser context menu with your own branded navigation experience.

HTML Structure

The HTML structure is minimal and straightforward:

  • The main wrapper custom-context-menu-wrapper contains all menu elements
  • The menu container custom-context-menu has the hidden class applied initially
  • An unordered list context-menu-items holds all menu options
  • Menu items are dynamically generated via JavaScript
CSS Styling

The CSS handles appearance, animations, and responsive design:

  • Clean white background with subtle shadow for visual elevation
  • Precise border-radius: 10px for rounded corners on all elements
  • Consistent 16px font size for readability
  • Hover effects with background color change
  • Special styling for first and last items to maintain corner radius on hover
  • Divider styling for visual separation between menu sections
  • Fixed positioning ensures the menu appears at the cursor location
JavaScript Functionality

The JavaScript provides all interactive features:

  • Context Menu Configuration:
    • Customizable menu items with text and URLs
    • Support for dividers between menu sections
    • Option to enable globally or only on specific elements
  • Event Handling:
    • Captures right-click events and prevents the default browser menu
    • Positions the menu at cursor coordinates
    • Ensures the menu stays within viewport boundaries
    • Closes the menu when clicking elsewhere or pressing Escape
  • Dynamic Generation:
    • Creates menu items from configuration object
    • Supports optional "open in new tab" functionality
    • Automatically initializes when the page loads
Customization Options

The context menu can be easily customized:

  • Menu Items: Edit the menuItems array to change navigation options
  • Global Toggle: Set globalEnable to control menu activation scope
  • Visual Styling: Adjust CSS properties like colors, shadows, and border-radius
  • Font Size: Modify the font-size property for different text sizes
  • Hover Effects: Change the background-color for different hover appearances
  • Menu Width: Adjust the min-width property for wider or narrower menus
Implementation Tips

For the best integration experience:

  • Place the HTML in your site's body section
  • Add the CSS to your stylesheet or in the head section
  • Include the JavaScript before the closing body tag
  • Ensure your menu links use absolute URLs with your domain
  • For multiple context menus on one page, create unique IDs and target them separately
  • Test the menu on different devices to ensure proper positioning
Resource Details:
Custom Right-Click Context Menu replaces the browser's default right-click menu with an elegant navigation panel for your website. When users right-click anywhere on your site, they're presented with custom navigation links to key pages, featuring smooth hover effects, maintained border radius, and automatic positioning within the viewport. Simple HTML/CSS/JS implementation with fully customizable menu items, styling, and behavior through an easy-to-edit configuration object.

Last Updated:

May 25th 2025

Category:

Menus

Need Help?

Join Slack
Callum Wells
Callum Wells
i
Creator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.
A black padlock with a keyhole on a white background.

NO-ACCESS

Only for Desktop Users

This page is only available on desktop.

Please Log in on a desktop to gain access.