npm package: @lemonadejs/contextmenu
Description: LemonadeJS Contextmenu JavaScript Plugin
Author: Contact
Latest version: 5.8.3

# LemonadeJS Context Menu

[Official website and documentation is here](https://lemonadejs.net/docs/plugins/context-menu)

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:

```bash
$ npm install @lemonadejs/contextmenu
```

### CDN

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

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

```javascript
// 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

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

```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](https://lemonadejs.net) Context Menu is released under the MIT.

## Other Tools

-   [jSuites](https://jsuites.net/docs)
-   [Jspreadsheet Data Grid](https://jspreadsheet.com)