Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Menu component
JavaScript CSS
Tree: 0d20fe9246

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
test
.gitignore
.npmignore
History.md
Makefile
Readme.md
component.json
index.js
menu.css
package.json

Readme.md

Menu

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

js menu component

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

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

API

Menu()

Create a new Menu:

var Menu = require('menu');
var menu = new Menu();
var menu = 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');
// => true

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

menu.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

Something went wrong with that request. Please try again.