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
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);
| 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 |
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/
http://localhost:8000/tests/runner.html?coverage
rc-menu is released under the MIT license.
FAQs
Unknown package
The npm package rc-menu receives a total of 1,165,021 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
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.