What is rc-menu?
The rc-menu package is a React component for building menus. It provides a flexible and accessible way to create dropdown, context, and other types of menus in your web application. It supports features like keyboard navigation, animation, and customization through themes.
What are rc-menu's main functionalities?
Basic Menu
This code sample demonstrates how to create a basic menu with three options. When an option is selected, it logs the key of the selected item.
import Menu, { Item as MenuItem } from 'rc-menu';
<Menu onSelect={({ key }) => console.log(key)}>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
<MenuItem key="3">Option 3</MenuItem>
</Menu>
Sub Menu
This example shows how to create a menu with a sub-menu. The sub-menu contains two options, demonstrating how to nest menus within each other.
import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';
<Menu>
<SubMenu title="Sub Menu">
<MenuItem key="sub1">Option 1</MenuItem>
<MenuItem key="sub2">Option 2</MenuItem>
</SubMenu>
</Menu>
Vertical Menu
This snippet illustrates how to create a vertical menu by setting the mode prop to 'vertical'. It's useful for sidebar navigation.
import Menu, { Item as MenuItem } from 'rc-menu';
<Menu mode="vertical">
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
<MenuItem key="3">Option 3</MenuItem>
</Menu>
0
react menu component. port from https://github.com/kissyteam/menu
![Sauce Test Status](https://saucelabs.com/buildstatus/rc-menu)
![Sauce Test Status](https://saucelabs.com/browser-matrix/rc-menu.svg)
Screenshot
![alt](https://tfsimg.alipay.com/images/T19vReXg0oXXXXXXXX.png)
Usage
var Menu = require('rc-menu');
var SubMenu = Menu.SubMenu;
var MenuItem = Menu.Item;
React.render(<Menu><MenuItem>1</MenuItem><SubMenu title="2"><MenuItem>2-1</MenuItem></SubMenu></Menu>, container);
install
![rc-menu](https://nodei.co/npm/rc-menu.png)
API
name | type | default | description |
---|
className | String | | additional css class of root dom node |
activeKey | Object | first active item's key | same with active tabPanel's key |
---|
activeFirst | Boolean | false | whether active first menu item when show if activeKey is not set |
---|
multiple | Boolean | false | whether allow multiple select |
---|
selectedKeys | String[] | [] | selected keys of items |
---|
onSelect | function(key:String,child:ReactComponent) | | called when select a menu item |
---|
onDeselect | function(key:String,child:ReactComponent) | | called when deselect a menu item |
---|
onSelect | Function(key:String) | | function called with selected menu item's key as param |
---|
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 |
---|
openOnHover | Boolean | true | whether show second sub menu on hover |
---|
Development
npm install
npm start
Example
http://localhost:8001/examples/index.md
online example: http://react-component.github.io/menu/build/examples/
Test Case
http://localhost:8000/tests/runner.html?coverage
Coverage
http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
License
rc-menu is released under the MIT license.