Listbox Menu component

Listbox Menu

A Listbox Menu component with structural styling to give you a clean slate. The Listbox Menu component is built on top of Menu.

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

Events are inherited from Menu as listed below.

  • 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 listboxMenu = require('listbox-menu');
var data = [
    league: "Scottish Premier League",
    teams: ["Aberdeen", "Celtic", "Dundee", "Dundee Utd", "Hearts", "Hibs", "Inverness CT", "Kilmarnock", "Motherwell", "Ross County", "St Johnstone", "St Mirren"]
    league: "First Division",
    teams: ["Airdrie", "Cowdenbeath", "Dumbarton", "Dunfermline", "Falkirk", "Hamilton", "Livingston", "Morton", "Partick Thistle", "Raith Rovers"]
    league: "Second Division",
    teams: ["Albion Rovers", "Alloa", "Arbroath", "Ayr Utd", "Brechin", "East Fife", "Forfar", "Queen of the South", "Stenhousemuir", "Stranraer"]
    league: "Third Division",
    teams: ["Annan Athletic", "Berwick Rangers", "Clyde", "East Stirlingshire", "Elgin City", "Montrose", "Peterhead", "Queens Park", "Rangers", "Stirling Albion" ]
var menu = new listboxMenu();
var submenu = new listboxMenu();
submenu.setSelectChecker(function(item) {
  return confirm("Do you really want to do this?");
for (var i = 0; i < data.length; i++) {
  menu.add(i, data[i].league);
menu.on('select', function(item){
  var teams;
  teams = data[parseInt(item)].teams;
  for (var i = 0; i < teams.length; i++) {
submenu.on('select', function(item){
  console.log('selected "%s"', item);
 menu.moveTo(100, 100);

As well as the Menu API, Listbox Menu adds the following.

Create a new ListboxMenu:

var ListboxMenu = require('listbox-menu');
var menu = new ListboxMenu();

Empties all items from the menu.

Add a function to the Listbox Menu which will be called when a menu item is clicked. If the function returns false then the select event will be abandoned. This allows functionality such as a confirmation dialog prior to switching to a new menu item.

  • Intended to be used as on-screen navigation menu as opposed to a contect menu
  • Listbox Menu doesn't hide when clicked
  • Selected item is not deselected on hover
  • Allows validation of selection events (via setSelectChecker)
  • Listbox menu currently doesn't support keyboard navigation