menupro
Version:
Custom menu like OS but better
150 lines (118 loc) • 3.4 kB
Markdown
[](https://www.npmjs.com/package/menupro)
[](https://opensource.org/licenses/MIT)
A lightweight, dependency-free dropdown menu library for web applications. Create desktop-style navigation menus with ease.
- **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
```bash
npm i menupro
```
## Quick Start
### 1. Import the library
```html
<script src="menupro/index.js"></script>
```
Or with ES modules:
```js
import 'menupro'
```
```js
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()'
}
]
})
```
| 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
```js
{
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', ... }
]
}
```
The `onclick` property supports multiple formats:
```js
// 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!') }
```
```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>
```
MIT License
Copyrigth (c) [Dario Passariello](https://dario.passariello.ca/)