A Modern and Lightweight Context Menu JavaScript Library | ModernContext.js

modern-context-menu-js

ModernContext.js is a modern, beautiful and lightweight JavaScript context menu library inspired by Fluent Design. ModernContext.js supports dark mode. If your browser is set to dark mode, the context menu will automatically switch to black-based design.

fluent design css, fluent design wpf, fluent design vs material design, fluent design examples, fluent design pattern, fluent design icons

Supported browsers

The following browsers are supported. ModernContext.js might work in other modern browsers, but I only tested the following ones.

  • Google Chrome
  • Fire fox
  • Microsoft Edge

Note: Firefox does not currently support CSS backdrop-filter, so the background blur effect is dimmed if you are using Firefox.

How to make use of it:

1. Load the minified version of the context menu.

<script src=”context.min.js”></script>

2. Define your menu data in an array of objects containing item type, label, and callback.

const menuItems = [
      {
          type: "item",
          label: "",
          callback: () => {
              alert("");
          }
      },
      {
          type: "item",
          label: "",
          callback: () => {
              alert("");
          }
      },
      {
          type: "item",
          label: "",
          callback: () => {
              alert("");
          }
      },
      {
          type: "separator"
      },
      {
          type: "item",
          label: ""
      },
];

3. Initialize the library and attach the context menu to a container you specify.

const context = new Context("#container", menuItem);

4. Add extra items to the context menu.

// with callback
context.add_item("Google", () => {
  alert("Google")
});

// with no callback
context.add_item("No Callback");

// add separator
context.add_separator();

// add more items
context.add_contents(menuItem2);

5. Open/close the context menu manually.

context.open();
context.close();

Modern Context Menu Inspired By Fluent Design, ModernContext.js Plugin/Github


See Demo And Download

Official Website(Robot-Inventor): Click Here

This superior jQuery/javascript plugin is developed by Robot-Inventor. For extra Advanced Usages, please go to the official website.