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. Install & import the modern-context component.

# NPM
$ npm i modern-context

// ES module
import { Context } from "modern-context";

// Browser
import { Context } from "./dist/modern-context.min.js"

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:

v2.0.0 (02/18/2023)

• This version includes some breaking changes. For example, methods are renamed snake_case to camelCase and CSS custom properties have mc- prefix.