https://github.com/react-component/menu

React Menu
https://github.com/react-component/menu

Last synced: 4 days ago
JSON representation

React Menu

• Host: GitHub
• URL: https://github.com/react-component/menu
• Owner: react-component
• License: mit
• Created: 2014-12-25T04:36:57.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2024-10-29T12:12:31.000Z (3 months ago)
• Last Synced: 2025-01-14T17:39:36.859Z (11 days ago)
• Language: TypeScript
• Homepage: https://menu.react-component.now.sh/
• Size: 12.9 MB
• Stars: 684
• Watchers: 33
• Forks: 248
• Open Issues: 98
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-list - rc-menu - React Menu. (Demos / Menu)
• awesome-react-components - rc-menu - React Menu. (UI Components / Menu)

README

        
# rc-menu

---

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

[![NPM version][npm-image]][npm-url]

[![npm download][download-image]][download-url]

[![build status][github-actions-image]][github-actions-url]

[![Codecov][codecov-image]][codecov-url]

[![bundle size][bundlephobia-image]][bundlephobia-url]

[![dumi][dumi-image]][dumi-url]

[npm-image]: http://img.shields.io/npm/v/rc-menu.svg?style=flat-square

[npm-url]: http://npmjs.org/package/rc-menu

[github-actions-image]: https://github.com/react-component/menu/workflows/CI/badge.svg

[github-actions-url]: https://github.com/react-component/menu/actions

[circleci-image]: https://img.shields.io/circleci/react-component/menu/master?style=flat-square

[circleci-url]: https://circleci.com/gh/react-component/menu

[codecov-image]: https://img.shields.io/codecov/c/github/react-component/footer/master.svg?style=flat-square

[codecov-url]: https://codecov.io/gh/react-component/footer/branch/master

[coveralls-image]: https://img.shields.io/coveralls/react-component/menu.svg?style=flat-square

[coveralls-url]: https://coveralls.io/r/react-component/menu?branch=master

[david-url]: https://david-dm.org/react-component/menu

[david-image]: https://david-dm.org/react-component/menu/status.svg?style=flat-square

[david-dev-url]: https://david-dm.org/react-component/menu?type=dev

[david-dev-image]: https://david-dm.org/react-component/menu/dev-status.svg?style=flat-square

[download-image]: https://img.shields.io/npm/dm/rc-menu.svg?style=flat-square

[download-url]: https://npmjs.org/package/rc-menu

[bundlephobia-url]: https://bundlephobia.com/result?p=rc-menu

[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-menu

[dumi-url]: https://github.com/umijs/dumi

[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

## Install

[![rc-menu](https://nodei.co/npm/rc-menu.png)](https://npmjs.org/package/rc-menu)

## Usage

```js

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

ReactDOM.render(

  

    1

    

      2-1

    

  ,

  container,

);

```

## Compatibility

| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
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[]})

            

            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

        

        

            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-menu is released under the MIT license.