Modern Context Menu Inspired By Fluent Design

Category: Javascript , Menu & Navigation | February 18, 2023
Author:Robot-Inventor
Views Total:235 views
Official Page:Go to website
Last Update:February 18, 2023
License:MIT

Preview:

Modern Context Menu Inspired By Fluent Design

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.

You Might Be Interested In:


Leave a Reply