Pretty Clean Context Menu In Pure JavaScript – Contextual.js

Category: Javascript , Menu & Navigation | May 10, 2019
Author: LucasReade
Views Total: 463
Official Page: Go to website
Last Update: May 10, 2019
License: MIT


Pretty Clean Context Menu In Pure JavaScript – Contextual.js


Contextual.js is a vanilla JS plugin that attaches a dynamic, customizable, multi-level context/pop-up menu to your element. Without any dependencies.

How to use it:

Download and import the Contextual.js plugin’s files into the html file.

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

Create an array of menu items containing titles, tips, icons, separators, and callback functions as follows:

const menuItems = [
      {title:'Item 1', tip:'Ctrl+A', icon:'check.svg' ,onclick: function(){console.log('Item 1 clicked');}},
      {title:'Item 2', tip:'', icon:'check.svg', children: [
        {title:'Subitem 1', tip:'', icon:'check.svg', onclick: function(){}},
        {title:'Subitem 2', tip:'', icon:'check.svg', onclick: function(){}},
        {title:'Subitem 3', tip:'', icon:'check.svg', onclick: function(){}}
      {title:'Item 3', tip:'Ctrl+B', icon:'check.svg',onclick: function(){}},
      {title:'Item 4', tip:'', icon:'check.svg',onclick: function(){console.log('Item 4 clicked');}},
      {title:'Item 5', tip:'Ctrl+C', icon:'check.svg', onclick: function(){}}

Attach the context menu to an element you specify.

const myInstance = document.getElementById('element');

// triggeredd on right click
  new contextualMenu({
      items: menuItems

Determine whether or not to dock the context menu to the trigger element. Default: false.

new contextualMenu({
    items: menuItems,
    docked: true



  • rewrite and fix submenu


  • Code clean up and restructure

You Might Be Interested In:

Leave a Reply