Modern Context Menu Inspired By Fluent Design

Preview:

Description:

A dynamic, animated, good-looking context menu JavaScript library inspired by Microsoft Fluent Design.

How to use 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: "CSSScript",
          callback: () => {
              alert("CSSScript");
          }
      },
      {
          type: "item",
          label: "jQueryScript",
          callback: () => {
              alert("jQueryScript");
          }
      },
      {
          type: "item",
          label: "VueScript",
          callback: () => {
              alert("VueScript");
          }
      },
      {
          type: "separator"
      },
      {
          type: "item",
          label: "ReactScript"
      },
];

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

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

4. Add more 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();

Changelog:

07/03/2021

• Update