menupro
v2.1.2
Published
Custom menu like OS but better
Maintainers
passarielloReadme
menupro
A lightweight, dependency-free dropdown menu library for web applications. Create desktop-style navigation menus with ease.
Features
- Zero dependencies - No jQuery, React, or other libraries required
- Lightweight - Only ~2.4KB minified (including CSS)
- Auto-injected CSS - Styles are automatically loaded with the JavaScript
- Recursive menus - Support for unlimited nested submenus
- Icon support - Add icons to menu items
- Easy event handling - Multiple ways to handle click events
Install
npm i menuproQuick Start
1. Import the library
<script src="menupro/index.js"></script>Or with ES modules:
import 'menupro'2. Initialize the menu
menupro.start({
name: 'menupro',
element: '#navbar',
nav: [
{
name: 'File',
sub: [
{ name: 'New', onclick: 'createNew()' },
{ name: 'Open', onclick: "openFile('doc')" },
{ name: '' }, // Separator
{ name: 'Exit', onclick: 'app.exit()' }
]
},
{
name: 'Edit',
sub: [
{ name: 'Cut', onclick: 'edit.cut()' },
{ name: 'Copy', onclick: 'edit.copy()' },
{ name: 'Paste', onclick: 'edit.paste()' }
]
},
{
name: 'Help',
onclick: 'showHelp()'
}
]
})Configuration
Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| name | string | CSS class name for the menu (default: "menupro") |
| element | string | HTMLElement | Target container for the menu |
| nav | array | Menu structure (see below) |
Menu Item Structure
{
name: 'Menu Label', // Required (empty string for separator)
onclick: 'functionName', // Optional: function name or call
icon: '<img src="...">', // Optional: HTML icon
sub: [ // Optional: nested menu items
{ name: 'Sub Item', ... }
]
}onclick Options
The onclick property supports multiple formats:
// 1. Function name (must be global)
{ onclick: 'myFunction' }
// 2. Function call with arguments
{ onclick: "openFile('document.pdf')" }
// 3. Direct function reference
{ onclick: () => console.log('clicked!') }Example HTML
<!DOCTYPE html>
<html>
<head>
<title>menupro Demo</title>
<script src="menupro/index.js"></script>
</head>
<body>
<nav id="navbar"></nav>
<script>
// Define a global function
function message(text) {
alert('You clicked: ' + text);
}
// Initialize menu
menupro.start({
name: 'menupro',
element: '#navbar',
nav: [
{ name: 'Home', onclick: "message('Home')" },
{ name: 'Products', sub: [
{ name: 'Software', onclick: "message('Software')" },
{ name: 'Hardware', onclick: "message('Hardware')" }
]},
{ name: 'About', onclick: "message('About')" }
]
});
</script>
</body>
</html>License
MIT License
Credits
Copyrigth (c) Dario Passariello