rc-menu

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

README

rc-menu

---

react menu component. port from https://github.com/kissyteam/menu

Screenshot

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

API

Menu props

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
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

Menu.Item props

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

Menu.SubMenu props

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

Menu.Divider props

none

Menu.ItemGroup props

name	type	default	description
title	String|React.Element		title of item group
children	React.Element[]		MenuItems belonged to this group

Development

npm install
npm start

Example

http://localhost:8001/examples/index.md

online example: http://react-component.github.io/menu/examples/

Test Case

http://localhost:8010/tests/runner.html?coverage

Coverage

http://localhost:8010/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8010/tests/runner.html?coverage

License

rc-menu is released under the MIT license.