Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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>
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 | |
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 |
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 |
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:8010/tests/runner.html?coverage
rc-menu is released under the MIT license.
FAQs
menu ui component for react
The npm package rc-menu receives a total of 1,525,432 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.