@rc-component/menu
+
Part of the Ant Design ecosystem.
🧭 Accessible React menu primitives for navigation, command surfaces, and nested item trees.
+ +
+ 
+ 
+ 
+ 
+ 
Part of the Ant Design ecosystem.
🧭 Accessible React menu primitives for navigation, command surfaces, and nested item trees.
+ +
+
+
+
+
+
English | 简体中文
+ +## Highlights + +- Horizontal, vertical, and inline menu modes. +- Controlled and uncontrolled selection, open keys, and active key state. +- `items` configuration API with legacy children support. +- Sub menus, item groups, dividers, icons, overflow, popup rendering, and keyboard focus helpers. +- TypeScript definitions and semantic `classNames` / `styles` slots. +- Used by Ant Design as the shared menu foundation. ## Install -[](https://npmjs.org/package/@rc-component/menu) +```bash +npm install @rc-component/menu +``` ## Usage -```js -import Menu, { SubMenu, MenuItem } from '@rc-component/menu'; +```tsx | pure +import Menu, { type MenuProps } from '@rc-component/menu'; + +const items: MenuProps['items'] = [ + { key: 'home', label: 'Home' }, + { + key: 'docs', + label: 'Docs', + children: [ + { key: 'quick-start', label: 'Quick start' }, + { key: 'api', label: 'API' }, + ], + }, +]; + +export default () => ( + +); +``` + +```tsx | pure +import Menu, { MenuItem, SubMenu } from '@rc-component/menu'; -ReactDOM.render( +export default () => ( , - container, + ); ``` -## Compatibility +## Examples -| [
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)| 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". | -
| 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. | -
| 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. | -
| 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 | -
Ant Design 生态的一部分。
🧭 React 菜单组件，支持水平、垂直、内联、分组和子菜单。
+ +
+
+
+
+
+
English | 简体中文
+ +## 特性 + +- 水平、垂直和内联菜单模式。 +- 受控和非受控选择、打开键和活动键状态。 +- `items` 配置 API 具有旧子支持。 +- 子菜单、项目组、分隔线、图标、溢出、弹层渲染和键盘焦点助手。 +- 提供 TypeScript 类型定义和语义化 `classNames` / `styles` 插槽。 +- 被 Ant Design 用作共享的 menu 基础能力。 + +## 安装 + +```bash +npm install @rc-component/menu +``` + +## 使用 + +```tsx | pure +import Menu, { type MenuProps } from '@rc-component/menu'; + +const items: MenuProps['items'] = [ + { key: 'home', label: 'Home' }, + { + key: 'docs', + label: 'Docs', + children: [ + { key: 'quick-start', label: 'Quick start' }, + { key: 'api', label: 'API' }, + ], + }, +]; + +export default () => ( + +); +``` + +```tsx | pure +import Menu, { MenuItem, SubMenu } from '@rc-component/menu'; + +export default () => ( + +); +``` + +## 示例 + +运行本地 dumi 站点： + +```bash +npm install +npm start +``` + +然后打开 `http://localhost:8000`。 + +## API + +### Menu + +| 参数 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| activeKey | `string` | - | 受控活动项目键。 | +| builtinPlacements | `Record