Menu

Menu component with structural styling to give you a clean slate.

Installation

$ npm install menu-component

Features

• events for composition
• structural CSS letting you decide on style
• fluent API
• arrow key navigation

Events

• show when shown
• hide when hidden
• remove (item) when an item is removed
• clear when the menu has been cleared
• select (item) when an item is selected
• * menu item events are emitted when clicked

Example

varMenu=require('menu');varmenu=newMenu;menu.add('Add item').add('Edit item',function(){console.log('edit');}).add('Remove item',function(){console.log('remove');}).add('Remove "Add item"',function(){menu.remove('Add item');menu.remove('Remove "Add item"');});menu.on('select',function(item){console.log('selected "%s"',item);});menu.on('Add item',function(){console.log('added an item');});oncontextmenu=function(e){e.preventDefault();menu.moveTo(e.pageX,e.pageY);menu.show();};

API

Menu()

Create a new Menu:

varMenu=require('menu');varmenu=newMenu();varmenu=Menu();

Menu#add([slug], text, [fn])

Add a new menu item with the given text, optional slug and callback fn.

Using events to handle selection:

menu.add('Hello');menu.on('Hello',function(){console.log('clicked hello');});

Using callbacks:

menu.add('Hello',function(){console.log('clicked hello');});

Using a custom slug, otherwise "hello" is generated from the text given, which may conflict with "rich" styling like icons within menu items, or i18n.

menu.add('add-item','Add Item');menu.on('add-item',function(){console.log('clicked "Add Item"');});menu.add('add-item','Add Item',function(){console.log('clicked "Add Item"');});

Menu#remove(slug)

Remove an item by the given slug:

menu.add('Add item');menu.remove('Add item');

Or with custom slugs:

menu.add('add-item','Add item');menu.remove('add-item');

Menu#clear()

Clears the menu.

menu.clear();

Menu#has(slug)

Check if a menu item is present.

menu.add('Add item');menu.has('Add item');// => truemenu.has('add-item');// => truemenu.has('Foo');// => false

Menu#moveTo(x, y)

Move the menu to (x, y).

Menu#show()

Show the menu.

Menu#hide()

Hide the menu.

License

MIT