# menupro
[](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.
## 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
```bash
npm i menupro
```
## Quick Start
### 1. Import the library
```html
```
Or with ES modules:
```js
import 'menupro'
```
### 2. Initialize the menu
```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()'
}
]
})
```
## 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
```js
{
name: 'Menu Label', // Required (empty string for separator)
onclick: 'functionName', // Optional: function name or call
icon: '
', // Optional: HTML icon
sub: [ // Optional: nested menu items
{ name: 'Sub Item', ... }
]
}
```
### onclick Options
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!') }
```
## Example HTML
```html
menupro Demo
```
## License
MIT License
## Credits
Copyrigth (c) [Dario Passariello](https://dario.passariello.ca/)