rc-menu
Advanced tools
Package description
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.
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>Part of the react-bootstrap package, Dropdown provides similar functionality for creating dropdown menus in React applications. It integrates well with Bootstrap's styling but is less flexible than rc-menu when it comes to non-dropdown types of menus.
Provided by Material-UI, a popular UI framework for React, this Menu component offers a comprehensive solution for creating menus. It comes with Material Design styling and animations out of the box. Compared to rc-menu, it might offer a more opinionated approach due to its Material Design integration.
This is a component from Ant Design, a design system containing a set of high-quality React components. The Menu component from Ant Design is similar to rc-menu but comes with Ant Design's design principles and extensive theming capabilities. It's suitable for applications that already use or plan to use Ant Design.
Readme
React Menu Component. port from https://github.com/kissyteam/menu
import Menu, { SubMenu, MenuItem } from 'rc-menu';
ReactDOM.render(
<Menu>
<MenuItem>1</MenuItem>
<SubMenu title="2">
<MenuItem>2-1</MenuItem>
</SubMenu>
</Menu>,
container,
);
 IE / Edge |  Firefox |  Chrome |  Safari |  Electron |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| 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". |
| 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. |
| name | type | default | description |
|---|---|---|---|
| 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. |
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/
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-menu is released under the MIT license.
FAQs
menu ui component for react
The npm package rc-menu receives a total of 1,348,972 weekly downloads. As such, rc-menu popularity was classified as popular.
We found that rc-menu demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.