Screenshot

API
There are the following properties:
- data - expects a map, key=main-menu item, value=[array of sub-menu items]. see example below.
- select - expects a key of the map or the id of a sub-menu
- onSelect - a callback which is called when a menu/submenu item was selected
Note that any menu-item-id === name/text of item.
Usage with WebPack
package.json
"dependencies": {
"@ewc-lib/ewc-menu": "^0.1.0"
}
webpack.config.js
const CopyPlugin = require("copy-webpack-plugin")
...
module: {
rules: [
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
new CopyPlugin({
patterns: [
{ from: "./node_modules/@ewc-lib/ewc-menu/assets/*", to: "./assets/[name][ext]" }
],
}),
],
index.html
<body>
<ewc-menu></ewc-menu>
<script>
document.addEventListener('DOMContentLoaded', function () {
const el = document.getElementsByTagName("ewc-menu")[0]
const d = new Map()
d.set("FILE", ["Open","Save","Close"])
d.set("EDIT", ["Copy","Cut","Paste"])
d.set("HELP", ["Help","About"])
el.data = d
el.onSelect = (subMenuId, menuId) => console.log(`Menu selection: ${menuId} ${subMenuId} `)
el.select = "Cut"
})
</script>
</body>
index.js
import "@ewc-lib/ewc-menu"