0
# RC Menu
1

2
RC Menu is a comprehensive React menu component library that provides a full set of UI components for creating interactive menus in React applications. It offers Menu, SubMenu, MenuItem, Divider, and ItemGroup components with extensive customization options including multiple selection modes, keyboard navigation support, animation effects, and flexible styling.
3

4
## Package Information
5

6
- **Package Name**: rc-menu
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install rc-menu`
10

11
## Core Imports
12

13
```typescript
14
import Menu, { SubMenu, MenuItem, MenuItemGroup, Divider } from "rc-menu";
15
```
16

17
Alternative named imports:
18

19
```typescript
20
import Menu, { SubMenu, Item, ItemGroup, Divider } from "rc-menu";
21
```
22

23
For CommonJS:
24

25
```javascript
26
const Menu = require("rc-menu");
27
const { SubMenu, MenuItem, MenuItemGroup, Divider } = Menu;
28
```
29

30
For type definitions:
31

32
```typescript
33
import type { MenuProps, MenuItemProps, SubMenuProps, MenuItemGroupProps, MenuRef } from "rc-menu";
34
```
35

36
## Basic Usage
37

38
**Modern items API (Recommended):**
39

40
```typescript
41
import Menu from "rc-menu";
42

43
function App() {
44
  const handleClick = (info) => {
45
    console.log('Clicked:', info.key);
46
  };
47

48
  const handleSelect = (info) => {
49
    console.log('Selected:', info.selectedKeys);
50
  };
51

52
  const items = [
53
    {
54
      key: '1',
55
      label: 'Navigation One',
56
    },
57
    {
58
      key: '2',
59
      label: 'Navigation Two',
60
    },
61
    {
62
      key: 'sub1',
63
      label: 'Navigation Three - SubMenu',
64
      children: [
65
        { key: '3', label: 'Option 1' },
66
        { key: '4', label: 'Option 2' },
67
      ],
68
    },
69
    { type: 'divider' },
70
    {
71
      key: '5',
72
      label: 'Navigation Four',
73
    },
74
  ];
75

76
  return (
77
    <Menu
78
      mode="vertical"
79
      items={items}
80
      defaultSelectedKeys={['1']}
81
      onClick={handleClick}
82
      onSelect={handleSelect}
83
    />
84
  );
85
}
86
```
87

88
**Legacy children API (Deprecated):**
89

90
```typescript
91
import Menu, { SubMenu, MenuItem, Divider } from "rc-menu";
92

93
function App() {
94
  const handleClick = (info) => {
95
    console.log('Clicked:', info.key);
96
  };
97

98
  const handleSelect = (info) => {
99
    console.log('Selected:', info.selectedKeys);
100
  };
101

102
  return (
103
    <Menu
104
      mode="vertical"
105
      defaultSelectedKeys={['1']}
106
      onClick={handleClick}
107
      onSelect={handleSelect}
108
    >
109
      <MenuItem key="1">Navigation One</MenuItem>
110
      <MenuItem key="2">Navigation Two</MenuItem>
111
      <SubMenu key="sub1" title="Navigation Three - SubMenu">
112
        <MenuItem key="3">Option 1</MenuItem>
113
        <MenuItem key="4">Option 2</MenuItem>
114
      </SubMenu>
115
      <Divider />
116
      <MenuItem key="5">Navigation Four</MenuItem>
117
    </Menu>
118
  );
119
}
120
```
121

122
## Architecture
123

124
RC Menu is built around several key components and systems:
125

126
- **Menu Container**: Main component managing state, keyboard navigation, and child component coordination
127
- **Menu Items**: Individual interactive elements (MenuItem) with event handling and styling support
128
- **SubMenu System**: Nested menu support with popup/inline modes and configurable triggers
129
- **Selection Management**: Single/multiple selection with controlled and uncontrolled modes
130
- **Animation System**: Configurable animations for expand/collapse and popup behaviors
131
- **Keyboard Navigation**: Full accessibility support with arrow key navigation and Enter/Space activation
132
- **Event System**: Comprehensive click, select, hover, and open/close event handling
133

134
## Capabilities
135

136
### Menu Container
137

138
Core menu container component with comprehensive configuration options for layout, selection, animation, and event handling.
139

140
```typescript { .api }
141
interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
142
  // Basic Configuration
143
  prefixCls?: string;
144
  rootClassName?: string;
145
  items?: any[]; // Array of item objects with key, label, children properties
146
  /** @deprecated Please use `items` instead */
147
  children?: React.ReactNode;
148
  disabled?: boolean;
149
  direction?: 'ltr' | 'rtl';
150
  
151
  // Mode
152
  mode?: 'horizontal' | 'vertical' | 'inline';
153
  inlineCollapsed?: boolean;
154
  disabledOverflow?: boolean;
155
  
156
  // Active State
157
  activeKey?: string;
158
  defaultActiveFirst?: boolean;
159
  
160
  // Selection
161
  selectable?: boolean;
162
  multiple?: boolean;
163
  defaultSelectedKeys?: string[];
164
  selectedKeys?: string[];
165
  
166
  // Open/Close Control
167
  defaultOpenKeys?: string[];
168
  openKeys?: string[];
169
  
170
  // Events
171
  onClick?: (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
172
  onSelect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
173
  onDeselect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
174
  onOpenChange?: (openKeys: string[]) => void;
175
  
176
  // Level & Layout
177
  inlineIndent?: number;
178
  
179
  // Motion
180
  motion?: any; // Animation configuration object
181
  defaultMotions?: any; // Default animation configurations for different modes
182
  
183
  // Popup
184
  subMenuOpenDelay?: number;
185
  subMenuCloseDelay?: number;
186
  forceSubMenuRender?: boolean;
187
  triggerSubMenuAction?: 'click' | 'hover';
188
  builtinPlacements?: Record<string, any>;
189
  
190
  // Icon
191
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
192
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
193
  overflowedIndicator?: React.ReactNode;
194
  overflowedIndicatorPopupClassName?: string;
195
  
196
  // Function
197
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
198
}
199

200
interface MenuRef {
201
  focus: (options?: FocusOptions) => void;
202
  list: HTMLUListElement;
203
}
204
```
205

206
[Menu Container](./menu-container.md)
207

208
### Menu Items
209

210
Individual menu item components with support for icons, disabled states, and event handling.
211

212
```typescript { .api }
213
interface MenuItemProps {
214
  children?: React.ReactNode;
215
  disabled?: boolean;
216
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
217
  extra?: React.ReactNode;
218
  onMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
219
  onMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
220
}
221
```
222

223
[Menu Items](./menu-items.md)
224

225
### SubMenu System
226

227
Nested menu support with popup and inline modes, configurable triggers, and animation options.
228

229
```typescript { .api }
230
interface SubMenuProps {
231
  title?: React.ReactNode;
232
  children?: React.ReactNode;
233
  disabled?: boolean;
234
  popupClassName?: string;
235
  popupStyle?: React.CSSProperties;
236
  popupOffset?: number[];
237
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
238
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
239
  overflowedIndicator?: React.ReactNode;
240
  onTitleClick?: (info: { key: string; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
241
  onTitleMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
242
  onTitleMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
243
}
244
```
245

246
[SubMenu System](./submenu-system.md)
247

248
### Layout Components
249

250
Utility components for organizing menu structure including groups and dividers.
251

252
```typescript { .api }
253
interface MenuItemGroupProps {
254
  title?: React.ReactNode;
255
  children?: React.ReactNode;
256
}
257

258
interface DividerProps {
259
  className?: string;
260
  style?: React.CSSProperties;
261
}
262
```
263

264
[Layout Components](./layout-components.md)
265

266