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.

$3

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

``bash
$ npm install @lemonadejs/contextmenu
`

$3

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

`html





`

$3

Quick example with Lemonade

`javascript
// Add the following link to your HTML file:
//
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

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


`vue



``

$3

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

$3

| 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