JarCastingreact-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 (
<Menu className='myMenu'>
<MenuTrigger>
⚙
</MenuTrigger>
<MenuOptions>
<MenuOption>
1st Option
</MenuOption>
<MenuOption onSelect={this.someHandler}>
2nd Option
</MenuOption>
<div className='a-non-interactive-menu-item'>
non-selectable item
</div>
<MenuOption disabled={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.
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.js for defaults. The .Menu__MenuOptions element will always have a vertical and horizontal modifier.