react-menu-bar

Menu bar component for React.

Installation

npm install --save react-menu-bar

Usage

var {MenuBar, MenuItem, Menu, Separator} = require('react-menu-bar');
 
var MyMenuBar = React.createClass({
  render: function () {
    return (
      <MenuBar onSelect={this.onSelect}>
        <MenuItem label="File">
          <Menu>
            <MenuItem command="new-window">New Window</MenuItem>
            <MenuItem command="new-file">New File</MenuItem>
          </Menu>
        </MenuItem>
 
        <MenuItem label="Edit">
          <Menu>
            <MenuItem command="undo">Undo</MenuItem>
            <MenuItem command="redo">Redo</MenuItem>
            <Separator />
            <MenuItem label="Find">
              <Menu>
                <MenuItem command="find">Find…</MenuItem>
                <MenuItem command="find-next">Find Next</MenuItem>
                <MenuItem command="find-previous">Find Previous</MenuItem>
                <MenuItem command="use-selection-for-find">Use Selection For Find</MenuItem>
              </Menu>
            </MenuItem>
          </Menu>
        </MenuItem>
 
        <MenuItem label="Help">
          <Menu>
            <MenuItem command="terms-of-use">Terms of Use</MenuItem>
            <MenuItem command="documentation">Documentation</MenuItem>
            <Separator />
            <MenuItem command="release-notes">Release Notes</MenuItem>
          </Menu>
        </MenuItem>
      </MenuBar>
    );
  },
 
  onSelect: function (command) {
    console.log('Selected: %s', command);
  }
});