ModernContext.js

A modern, beautiful, and lightweight context menu JavaScript library inspired by Fluent Design.

Dark Mode Support

ModernContext.js supports dark mode. If your browser is set to dark mode, the context menu will automatically switch to the black-based design.

Usage

See the documentation for more information.

npm

npm install modern-context

import { Context } from "modern-context";

Browser

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

Example

const contents = [
    {
        type: "item",
        label: "Alert",
        callback: () => {
            alert("Clicked!");
        }
    },
    {
        type: "separator"
    },
    {
        type: "item",
        label: "No Callback"
    }
];

const context = new Context("#target", contents);

CSS Custom Properties

| Property | Default | Description | | :-------------------- | :-------------------------------------------------------------------- | :-------------------------------------- | | --mc-text-color | #333333 (white in dark mode) | Text color in the context menu. | | --mc-background-color | rgba(255, 255, 255, 0.7) (rgba(51, 51, 51, 0.7) in dark mode) | Background color of the context menu. | | --mc-corner-radius | 0.25em | Corner radius size of the context menu. | | --mc-font-family | sans-serif | Font family of text. |

Supported Browsers

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

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

Development

Setup

npm install

Build

npm run build

Generate documentation

npm run doc