JavaScript Context Menu

The LemonadeJS Context Menu is a reactive JavaScript plugin to create dynamic and interactive menu navigation on web applications. It provides a customizable and user-friendly experience, featuring intelligent configurations that automatically adjust the menu’s position to prevent it from disappearing off-screen, thus enhancing both the user experience and the responsive design of your application.

This plugin allows for the customization of the menu’s behaviour to align with the specific needs of your application. Whether executing direct actions or unveiling nested options for an in-depth selection process, the Context Menu adapts effortlessly to various user interactions.

With a strong emphasis on responsive design and adaptability, the LemonadeJS Context Menu is a vital tool for web development. Its ease of integration with major frameworks like React, Vue, Angular, and others makes it an invaluable asset for creating sophisticated and user-friendly navigation experiences in modern web applications.

Documentation

Installation

npm install @lemonadejs/contextmenu

Settings

Property	Description
options: Option[]	An array of option objects describing the rendering options. Each item should follow the structure defined in the ‘Option Details’ section.
root?: HTMLElement	Custom root element for the contextmenu event listener. Defaults to the parent element.

Events

Event	Description
onclose?: (instance) => void	Callback executed when the menu closes.

Option Details

Property	Description
submenu?: Option[]	An optional array containing options displayed as a sub-menu.
title?: String	The title text associated with the option.
type?: String	The type of the option: ‘line’ for a separator, ‘inline’ for a custom inline element.
onclick?: () => void	The function executed upon selecting the option.
icon?: String	The name of the Material Icon associated with the option.
render?: () => void	The function executed when rendering the option.
onopen?: () => void	The function executed when the submenu is opened.
disabled?: Boolean	When true, the option is disabled and cannot be selected.
shortcut?: String	Display text for a keyboard shortcut hint (e.g., “Ctrl+C”).
tooltip?: String	Tooltip text displayed on hover.

Methods

Method	Description
openAt(event: Event): void	Open the context menu at the position of the given event (uses clientX/clientY).
openAt(x: number, y: number): void	Open the context menu at the specified x and y coordinates.
open(options, x, y, adjust): void	Open the context menu with the given options at position (x, y). When adjust is true, repositions to keep the menu visible on screen.
close(level?: number): void	Close the context menu. If level is provided, closes submenus from that level onwards; otherwise closes all.
isClosed(): boolean	Returns true if the context menu is closed.

Examples

Activating Actions

Actions can be incorporated into the context menu by adding an onclick method to the option.

Right-click within the blue area of the example to open the context menu.

live

<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/style.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/index.min.js"></script>

<div id='root' style="background-color: #ccc; width: 100px; height: 100px;"></div>

<script>
let root = document.getElementById('root');

const options = [
    {
        title: 'Console.log',
        onclick:function() {
            console.log('Hello!')
        },
    },
    {
        title: 'Show Alert',
        onclick:function() {
            alert('Hello!')
        },
    },
];

const contextmenu = Contextmenu(root, {
    options: options,
});
</script>
</html>

// Add the following link to your HTML file:
// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
import Contextmenu from '@lemonadejs/contextmenu';
import '@lemonadejs/contextmenu/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    
    const options = [
        {
            title: 'Console.log',
            onclick:function() {
                console.log('Hello!')
            },
        },
        {
            title: 'Show Alert',
            onclick:function() {
                alert('Hello!')
            },
        },
    ];

    return render => render`<div style="background-color: #2222AA; width: 100px; height: 100px;">
        <Contextmenu options="${options}" :ref="self.contextmenu" />
    </div>`
}

import React, { useRef } from "react";
import Contextmenu from '@lemonadejs/contextmenu/dist/react';
import '@lemonadejs/contextmenu/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

const options = [
    {
        title: 'Console.log',
        onclick:function() {
            console.log('Hello!')
        },
    },
    {
        title: 'Show Alert',
        onclick:function() {
            alert('Hello!')
        },
    },
];

export default function App() {
    const myRef = useRef();
    
    return (
        <>
            <div style={{ backgroundColor: '#2222AA', height: '100px', width: '100px' }}>
                <Contextmenu options={options} ref={myRef} />
            </div>
        </>
    );
}

<template>
    <div style="background-color: #2222AA; width: 100px; height: 100px;">
        <Contextmenu :options="options" />
    </div>
</template>

<script>
import Contextmenu from '@lemonadejs/contextmenu/dist/vue'
import '@lemonadejs/contextmenu/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default {
    name: 'App',
    components: {
        Contextmenu
    },
    data() {
        return {
            options: [
                {
                    title: 'Console.log',
                    onclick:function() {
                        console.log('Hello!')
                    },
                },
                {
                    title: 'Show Alert',
                    onclick:function() {
                        alert('Hello!')
                    },
                },
            ]
        }
    }
}
</script>

Configuring Submenu and Option Icons

Submenus can be integrated to display additional options within an option. Icons can also be added to options, providing users with visual cues to identify the associated actions.