react-menu

An accessible menu component built for React.JS

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

Basic Usage

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 (
<MenuclassName='myMenu'><MenuTrigger>
⚙
</MenuTrigger><MenuOptions><MenuOption>
1st Option
</MenuOption><MenuOptiononSelect={this.someHandler}>
2nd Option
</MenuOption><divclassName='a-non-interactive-menu-item'>
non-selectable item
</div><MenuOptiondisabled={true}onDisabledSelect={this.otherHanlder}>
disabled option
</MenuOption></MenuOptions></Menu>
);
}
});
ReactDOM.render(<App/>, document.body);

For a working example see the examples/basic example

Styles

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

varMenu=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.js for defaults. The .Menu__MenuOptions element will always have a vertical and horizontal modifier.