Create Custom Right-Click Context Menus with justContext.js

By Jake Rocheleau. in Toolkit. Updated on November 24, 2017.

Every web browser has a default context menu. This appears when the user right-clicks anywhere on a page and it usually has the same options, such as “copy”, “save”, or “inspect element”.

With the justContext library, you can build specialized context menus for any elements on your site. These can be auto-populated with anything you like and you can write custom functions to run whenever the user clicks an option in your custom menu.

Any page element can support its own context menu. This means you can target individual items such as slideshows or HTML5 video players, or you can target the entire page body.

You have full control over the theming of the context menu, including fonts, colors, icons, and even separators to divide your menu into sections. This plugin really lets you create a full context menu from scratch with any features you like.

By default, justContext comes with two themes: dark and light. You can choose between them and find whichever one best matches your website.

Each theme can be customized using different Google Web Fonts, not to mention the entire Font Awesome library is packaged by default.

Check out the live demo to see it in action. It works in all browsers except Internet Explorer but this shouldn’t be a problem considering Microsoft’s push to the new Edge browser.

Creating the actual context menu is a little tricky. It requires a few CSS classes and it’s all hard-coded in HTML into your web page.

Here’s a sample from the main repo on GitHub:

<ul class="jctx jctx-id-foo jctx-black jctx-black-shadow">
	<li data-action="cut">Cut</li>
	<li data-action="copy">Copy</li>
	<li data-action="paste">Paste</li>
	<hr>
	<li data-action="new_pkg">New package</li>
 <li data-action="new_cls">New class</li>
	<li data-action="new_intf" class="disabled">New interface
 (a disabled entry)</li>
</ul>

If you’re willing to tinker with settings you can do a lot with this plugin. But, I also admit it’s a niche-specific resource that won’t be valuable to all websites.

Regardless of why or how you’d use it, justContext is the absolute best resource for creating web context menus from scratch. All documentation is available on GitHub and the plugin is 100% free to use on any web project.