Wondering what’s next for npm?Check out our public roadmap! »

    menu-component

    0.1.1 • Public • Published

    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
    • 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#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

    Keywords

    Install

    npm i menu-component

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    none

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar