Pretty Clean Context Menu In Pure JavaScript – Contextual.js

Category: Javascript , Menu & Navigation | April 28, 2020
Author: LucasReade
Views Total: 4,264 views
Official Page: Go to website
Last Update: April 28, 2020
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:

  • icon
  • cssIcon
  • label
  • type
  • onClick
  • shortcut
  • submenu
  • markup
  • enabled
const menuItems = [
      new ContextualItem({type:'custom', markup: `<span>Custom item - add what you like</span>` }),
      new ContextualItem({type:'multi', items: [
          new ContextualItem({label:'Copy'}),
          new ContextualItem({label:'Cut'}),
          new ContextualItem({label:'Paste'}),
      new ContextualItem({label:'Button', onClick: () => {console.log('Item 1 clicked')}, shortcut:'Ctrl+A' }),
      new ContextualItem({type:'seperator'}),
      new ContextualItem({type:'submenu', label:'Sub menu', submenu:[
          new ContextualItem({label:'Subitem 1'}),
          new ContextualItem({label:'Subitem 2'}),
          new ContextualItem({label:'Subitem 3'}),
      new ContextualItem({label:'Disabled button', shortcut:'Ctrl+B', enabled: false }),

Attach the context menu to an element you specify.

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

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

Set how the menu appears, follow the mouse or sticky.

new contextualMenu({
    items: menuItems,
    isSticky: false

Set the width of the menu.

new contextualMenu({
    items: menuItems,
    width: '200px'



  • Update contextual.js


  • Clean up


  • Initial floating menu update


  • minor fixes


  • added animations for sub-menus


  • rewrite and fix submenu


  • Code clean up and restructure

You Might Be Interested In:

Leave a Reply