Clean Dynamic Context Menu In Pure JavaScript – menufy

Preview:

Description:

menufy is a small and pure JavaScript library for creating dynamic context menus that can be appended to any elements when right clicked.

How to use it:

Load the CSS file menufy.css to style the context menu.

<link rel="stylesheet" href="menufy.css">

Create menu items & their corresponding actions in the JavaScript:

let menu = [
    { 'label': 'Menu 1', action: () => action: () => alert('Menu 1 !') },
    { 'label': 'Menu 2', action: () => alert('Menu 2 !') },
    { 'label': 'Menu 3', action: () => alert('Menu 3 !') }
    ...
]

Append the context menu to the body element.

window.contextMenu = new Menufy(menu)

You can also change the default trigger event to ‘Left Click’:

window.contextMenu = new Menufy(menu, 'left')