react-menu

An accessible menu component built for React.JS

See example at http://instructure-react.github.io/react-menu/

Basic Usage

``html var React = require('react'); var ReactDOM = require('react-dom');

var Menu = require('react-menu'); var MenuTrigger = Menu.MenuTrigger; var MenuOptions = Menu.MenuOptions; var MenuOption = Menu.MenuOption;

var App = React.createClass({

render: function() { return (


        
          ⚙
        
        
          
            1st Option
          
          
            2nd Option
          
          

            non-selectable item
          
          
            disabled option


    );
  }
});
ReactDOM.render(, document.body);

For a working example see the examples/basic example

`Styles`

Bring in default styles by calling injectCSS on the Menu component.

`javascript var Menu = require('react-menu');

Menu.injectCSS();`

Default styles will be added to the top of the head, and thus any styles you write will override any of the defaults.

The following class names are used / available for modification in your own stylsheets:

`.Menu .Menu__MenuTrigger .Menu__MenuOptions .Menu__MenuOption .Menu__MenuOptions--vertical-bottom .Menu__MenuOptions--vertical-top .Menu__MenuOptions--horizontal-right .Menu__MenuOptions--horizontal-left`

The last four class names control the placement of menu options when the menu would otherwise bleed off the screen. See/lib/helpers/injectCSS.jsfor defaults. The.Menu__MenuOptions` element will always have a vertical and
horizontal modifier.