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

Install

Usage

import Menu, { SubMenu, MenuItem } from 'rc-menu';

ReactDOM.render(
  <Menu>
    <MenuItem>1</MenuItem>
    <SubMenu title="2">
      <MenuItem>2-1</MenuItem>
    </SubMenu>
  </Menu>,
  container,
);

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

API

Menu props

name	type	default	description
className	String		additional css class of root dom node
mode	String	vertical	one of ["horizontal","inline","vertical-left","vertical-right"]
activeKey	String		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
selectable	Boolean	true	allow selecting menu items
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
onOpenChange	(openKeys:String[]) => void		called when open/close sub menu
onDeselect	function({key:String, item:ReactComponent, domEvent:Event, selectedKeys:String[]})		called when deselect a menu item. only called when allow multiple
triggerSubMenuAction	Enum { hover, click }	hover	which action can trigger submenu open/close
openAnimation	{enter:function,leave:function}|String		animate when sub menu open or close. see rc-motion for object type.
openTransition	String		css transitionName when sub menu open or close
subMenuOpenDelay	Number	0	delay time to show popup sub menu. unit: s
subMenuCloseDelay	Number	0.1	delay time to hide popup sub menu. unit: s
forceSubMenuRender	Boolean	false	whether to render submenu even if it is not visible
getPopupContainer	Function(menuDOMNode): HTMLElement	() => document.body	Where to render the DOM node of popup menu when the mode is horizontal or vertical
builtinPlacements	Object of alignConfigs for dom-align	see placements.ts	Describes how the popup menus should be positioned
itemIcon	ReactNode | (props: MenuItemProps) => ReactNode		Specify the menu item icon.
expandIcon	ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode		Specify the menu item icon.
direction	String		Layout direction of menu component, it supports RTL direction too.
inlineIndent	Number	24	Padding level multiplier. Right or left padding depends on param "direction".

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
onMouseEnter	Function({eventKey, domEvent})
onMouseLeave	Function({eventKey, domEvent})
itemIcon	ReactNode | (props: MenuItemProps) => ReactNode		Specify the menu item icon.

Menu.SubMenu props

name	type	default	description
popupClassName	String		additional css class of root dom node
title	String/ReactElement		sub menu's content
overflowedIndicator	String/ReactElement	···	overflow indicator when menu overlows in horizontal mode
key	Object		corresponding to activeKey
disabled	Boolean	false	no effect for click or keydown for this item
onMouseEnter	Function({eventKey, domEvent})
onMouseLeave	Function({eventKey, domEvent})
onTitleMouseEnter	Function({eventKey, domEvent})
onTitleMouseLeave	Function({eventKey, domEvent})
onTitleClick	Function({eventKey, domEvent})
popupOffset	Array		The offset of the popup submenu, in an x, y coordinate array. e.g.: `[0,15]`
expandIcon	ReactNode | (props: SubMenuProps) => ReactNode		Specify the menu item icon.
itemIcon	ReactNode | (props: SubMenuProps & { isSubMenu: boolean }) => ReactNode		Specify the menu item icon.

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

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-menu is released under the MIT license.