react menu component. port from https://github.com/kissyteam/menu
import Menu, {SubMenu, MenuItem} = require('rc-menu');
ReactDOM.render(<Menu>
<MenuItem>1</MenuItem>
<SubMenu title="2">
<MenuItem>2-1</MenuItem>
</SubMenu>
</Menu>, container);
| name | type | default | description |
|---|---|---|---|
| className | String | additional css class of root dom node | |
| mode | String | vertical | one of ["vertical","horizontal","inline"] |
| activeKey | Object | initial and current active menu item's key. | |
| defaultActiveFirst | Boolean | false | whether active first menu item when show if activeKey is not set or invalid |
| multiple | Boolean | false | whether allow multiple select |
| selectedKeys | String[] | [] | selected keys of items |
| defaultSelectedKeys | String[] | [] | initial selected keys of items |
| openKeys | String[] | [] | open keys of SubMenuItem |
| defaultOpenKeys | String[] | [] | initial open keys of SubMenuItem |
| onSelect | function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]}) | called when select a menu item | |
| onClick | function({key:String, item:ReactComponent, domEvent:Event, keyPath: String[]}) | called when click a menu item | |
| onOpen | function({openKeys:String[]}) | called when open a sub menu | |
| onClose | function({openKeys:String[]}) | called when close a sub menu | |
| onDeselect | function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]}) | called when deselect a menu item. only called when allow multiple | |
| openSubMenuOnMouseEnter | bool | true | whether enable top items to open on mouse enter |
| closeSubMenuOnMouseEnter | bool | true | whether enable close submenu on mouse leave |
| openAnimation | {enter:function,leave:function}|String | animate when sub menu open or close. see rc-animate for object type. | |
| openTransition | String | css transitionName when sub menu open or close |
| name | type | default | description |
|---|---|---|---|
| className | String | additional css class of root dom node | |
| disabled | Boolean | false | no effect for click or keydown for this item |
| key | Object | corresponding to activeKey |
| name | type | default | description |
|---|---|---|---|
| className | String | additional css class of root dom node | |
| title | String/ReactElement | sub menu's content | |
| key | Object | corresponding to activeKey | |
| disabled | Boolean | false | no effect for click or keydown for this item |
none
| name | type | default | description |
|---|---|---|---|
| title | String|React.Element | title of item group | |
| children | React.Element[] | MenuItems belonged to this group |
npm install
npm start
http://localhost:8001/examples/index.md
online example: http://react-component.github.io/menu/examples/
http://localhost:8010/tests/runner.html?coverage
rc-menu is released under the MIT license.