LemonadeJS Context Menu

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS Context Menu is a versatile solution for interactive menu navigation, offering a customizable and intuitive experience. Designed for efficient decision-making, users can choose options that trigger specific actions or toggle the opening of another menu—configurable to your preferences.

With a focus on flexibility, this component empowers you to tailor the menu's behavior according to your application's needs. Whether it's executing actions directly or revealing nested options for a more in-depth selection process, the Context Menu adapts seamlessly.

Noteworthy features include a user-friendly interface, allowing for smooth interactions and a clear decision-making process. The configuration options provided by the Context Menu make it a valuable addition to various applications, ensuring a responsive and adaptable menu system.

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/contextmenu

CDN

To use Context Menu via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/contextmenu/dist/style.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />

Usage

Quick example with Lemonade

// 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 self = this;

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

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

Quick example with React

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 contextmenu = useRef();

    return (
        <div style={{ backgroundColor: '#2222AA', width: '100px', height: '100px' }}>
            <Contextmenu options={options} ref={contextmenu} />
        </div>);
}

Quick example with Vue

<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>

Properties

| Property | Type | Description | |-----------|------|-------------| | options | option[] | An array of option objects describing the rendering options. Each item should follow the structure defined in the 'Option Details' section. |

Option Details

| Property | Type | Description | |-----------|------|-------------| | submenu? | array of options | 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 current object, which can be utilized to display a line with 'line'. | | onclick? | function | The function executed upon selecting the option. | | icon? | string | The name of the Material Icon associated with the option. | | render? | function | The function executed when rendering the option. | | onopen? | function | The function executed when the submenu is opened. | | onclose? | function | The function executed when the submenu is closed. |

License

The LemonadeJS Context Menu is released under the MIT.

Other Tools

• jSuites
• Jspreadsheet Data Grid