npm.io
2.2.0 • Published 1 month ago

menupro

Licence
MIT
Version
2.2.0
Deps
0
Size
20 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

menupro

npm version License

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 menupro

Quick 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