digitalocean/react-menu

Name: react-menu

Owner: DigitalOcean

Description: Accessible menu component built for React.JS

Created: 2015-03-09 22:38:57.0

Updated: 2016-12-30 14:07:45.0

Pushed: 2015-09-08 19:23:23.0

Homepage: null

Size: 1136

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-menu

An accessible menu component built for React.JS

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

Basic Usage

react = require('react');

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

App = React.createClass({

nder: 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}>
        diabled option
      </MenuOption>

    </MenuOptions>
  </Menu>
);



t.renderComponent(<App />, document.body);

For a working example see the examples/basic example

Styles

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

Menu = require('react-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:

u
u__MenuTrigger
u__MenuOptions
u__MenuOption
u__MenuOptions--vertical-bottom
u__MenuOptions--vertical-top
u__MenuOptions--horizontal-right
u__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.