ember-flex-menu

ember-flex-menu is a flexible menu component that has built-in support for keyboard navigation, multiple column layouts, and buttons that can toggle into inputs.

Installation

ember install ember-flex-menu

Usage

export default Ember.Controller.extend({
  choices: ['foo', 'bar', 'baz'],
 
  actions: {
    myAction(choice) {
      console.log(choice);
    }
  }
});

{{ember-flex-menu choices=choices onChoose=(action "myAction")}}

// styles/app.scss 
@import "ember-flex-menu/ember-flex-menu";

This results in a single column menu with buttons 'foo', 'bar', and 'baz'. If 'bar' is clicked, then 'myAction' will receive:

myAction(choice) {
  console.log(choice); // { text: 'bar', value: 'bar' }
}

inputable

export default Ember.Controller.extend({
  choices: ['foo', { text: 'bar', inputable: true }, 'baz'],
 
  actions: {
    myAction(choice) {
      console.log(choice); // { text: 'bar', value: 'the value that was input' }
    }
  }
});

columns

To display multiple columns:

{{ember-flex-menu choices=choices columns=5}}

Key Bindings

By default:

• acceptKeys: ['Enter']
• cancelKeys: ['Escape']
• moveDown: ['ArrowDown']
• moveLeft: ['ArrowLeft']
• moveRight: ['ArrowRight']
• moveUp: ['ArrowUp']

export default Ember.Component.extend({
  customMoveDown: ['KeyS']
})

{{ember-flex-menu moveDownKeys=customMoveDown}}

Consult the ember-keyboard docs for more info on key names.