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.
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
$ npm install @lemonadejs/contextmenu
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" />
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>
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. |
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. |
The LemonadeJS Context Menu is released under the MIT.