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.