Ever wanted to make your website feel smarter and more interactive when people right-click or select text? You’re in luck!
Here’s a free copy-paste code that gives your site a beautiful, modern context menu — just like what you’d expect from a pro web app.
Table of Contents
What the context menu Does
This context menu automatically appears when someone:
- Selects text
- Right-clicks an image
- Right-clicks a link
It gives useful options like:
For Text
- Copy selected text
- Create a shareable highlight link
- Share selected text via WhatsApp, Facebook, X (Twitter)
- Search on Google, Bing, or Brave
- Native share (on phones!)
For Images
- Download the image
- Copy the image link
- Open it in a new tab
For Links
- Open the link in a new tab
- Copy the link URL
It even shows a little “Copied!” toast when you take action. Nice touch, right?
Try The Context Menu Live
Just select some text or right-click an image or link on this page (once installed) — and boom — the smart menu appears. It also works on mobile with long-press!
How to Add This to Your Website
You can use this code on any website, including WordPress, Blogger, static HTML, or PHP websites.
All You Need to Do:
There are 3 parts:
- A
<style>block (for the look) - A
<div>for the menu - A
<script>(for the behavior)
For WordPress Users
Easiest Method (Recommended)
Use the WPCode plugin:
- Install WPCode from the Plugins section.
- Go to Code Snippets > Add New > HTML Snippet.
- Paste the code as a HTML snippet.
- Save and activate.
Done!
🛠️ Manual Method
- Go to Appearance > Theme File Editor.
- Open
footer.php. - Before
</body>, paste:<div id="contextMenu" class="context-menu"></div> <div id="toast" class="toast">Copied!</div> <script>/* Paste JS code here */</script> - Add the CSS to your theme’s
style.css.
🌐 For Any Other Website (HTML, PHP, etc.
- Paste the
<style>block into your<head>section. - Paste the
<div>and<script>just before the closing</body>tag.
That’s it! You don’t need any libraries — it’s pure HTML, CSS, and JavaScript.
Is It Mobile Friendly?
Absolutely. It supports long-press gestures on mobile and automatically adjusts its position and layout for smaller screens.
Bonus Feature: Highlight Sharing
This tool also adds a cool “highlight and share text” feature. When someone highlights text and copies the special link, anyone who opens that link will be automatically scrolled to and shown the highlighted section.
Example highlighted text: https://tinyurl.com/2bs5paae
Want the Full Code?
You can get a copy of the html code via a pdf on your email address.
[download_after_email id=”5320″]
Final Thoughts
This is a super useful feature for:
- Blogs
- News sites
- Educational websites
- Developer portfolios
- Content creators
It makes your site feel more alive and helps visitors interact, share, and engage with your content faster.
I’m a web blogger who writes informational articles across various sites and platforms.
- Martin Mbucho
- Martin Mbucho
- Martin Mbucho
- Martin Mbucho
