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

$ npm install menu-component

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

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

var Menu = require('menu');

var menu = new Menu;

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();
};

MIT

Initialize a new Menu.

var Menu = require('menu');
var menu = new Menu();
var menu = Menu();

Emits:

• "show" when shown
• "hide" when hidden
• "remove" with the item name when an item is removed
• "select" (item) when an item is selected
• • menu item events are emitted when clicked

Inherit from Emitter.prototype.

Focus on the next menu item in direction.

returns MenuItem

Gets a menu item named slug.

returns Menu

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

When the item is clicked fn() will be invoked and the Menu is immediately closed. When clicked an event of the name text is emitted regardless of the callback function being present.

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"');
});

returns Menu

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');

returns Menu

Change menu item with slug.

returns Menu

Clear menu.

returns Boolean

Check if a menu item is present.

menu.add('Add item');

menu.has('Add item');
// => true

menu.has('add-item');
// => true

menu.has('Foo');
// => false

returns Number

Find index of menu item.

returns Menu

Move context menu to (x, y).

returns Menu

Move context menu to (x, y).

returns Menu

Show the menu.

returns Menu

Hide the menu.

returns Menu

Show a menu item.

returns Menu

Hide a menu item.

returns Menu

Unhide all items.

returns Menu

Toggle the menu.

returns Menu

Filter menu using fn.

returns Boolean

Check if menu is visible.

returns Boolean

Check if user is selecting.

MenuItem class.