@rc-component/menu

@rc-component/menu

React Menu Component. port from https://github.com/kissyteam/menu

Install

Usage

import Menu, { SubMenu, MenuItem } from '@rc-component/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
ref	React.HTMLLIElement		get dom node
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[],ItemData:ItemData})		called when select a menu item
onClick	function({key:String, item:ReactComponent, domEvent:Event, keyPath: String[], ItemData:ItemData})		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-component/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
extra	React.ReactNode		Specify menu item extra node.
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
ref	React.HTMLLIElement		get dom node
popupClassName	String		additional css class of root dom node
popupStyle	CSSProperties		additional css style 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
ref	React.HTMLLIElement		get dom node
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-component/menu is released under the MIT license.

Similar packages

Other packages similar to @rc-component/menu

@radix-ui/react-menubar

Provides accessible, unstyled menubar primitives with keyboard interaction and composable React components. It is focused on the menubar interaction pattern, while @rc-component/menu offers a broader menu component with built-in item, submenu, grouping, and layout APIs.

@headlessui/react

Offers accessible, unstyled React components, including a menu for action lists. It emphasizes accessible behavior and styling freedom; @rc-component/menu has a more menu-specific API with layout modes and menu-item grouping.

react-menu

A React library for accessible menus and context menus, including nested menus and customizable styling. It overlaps in menu and submenu functionality, while @rc-component/menu is oriented around configurable navigation-style layouts such as inline and horizontal menus.

antd

Ant Design's Menu component supports nested items, selection, and multiple layout modes, and includes a full visual design system. It offers a more styled, higher-level experience; @rc-component/menu is a lower-level component package suited to use where that underlying menu behavior is needed without adopting Ant Design's full component library.