0
# Menu Container
1

2
The Menu component serves as the main container for all menu functionality, providing comprehensive configuration for layout modes, selection behavior, keyboard navigation, animations, and event handling.
3

4
## Capabilities
5

6
### Menu Component
7

8
Main menu container component with extensive customization options.
9

10
```typescript { .api }
11
/**
12
 * Main menu container component
13
 * @param props - Menu configuration props
14
 * @returns React component
15
 */
16
declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
17

18
interface MenuProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
19
  // Basic Configuration
20
  prefixCls?: string;
21
  rootClassName?: string;
22
  items?: any[]; // Array of item objects with key, label, children properties
23
  children?: React.ReactNode;
24
  disabled?: boolean;
25
  direction?: 'ltr' | 'rtl';
26
  
27
  // Layout Mode
28
  mode?: 'horizontal' | 'vertical' | 'inline';
29
  inlineCollapsed?: boolean;
30
  disabledOverflow?: boolean;
31
  
32
  // Selection Control
33
  selectable?: boolean;
34
  multiple?: boolean;
35
  defaultSelectedKeys?: string[];
36
  selectedKeys?: string[];
37
  
38
  // Active State Control
39
  activeKey?: string;
40
  defaultActiveFirst?: boolean;
41
  
42
  // Open/Close Control
43
  defaultOpenKeys?: string[];
44
  openKeys?: string[];
45
  
46
  // Event Handlers
47
  onSelect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
48
  onDeselect?: (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
49
  onClick?: (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => void;
50
  onOpenChange?: (openKeys: string[]) => void;
51
  
52
  // Styling & Animation
53
  inlineIndent?: number;
54
  motion?: any; // Animation configuration object
55
  defaultMotions?: any; // Default animation configurations for different modes
56
  
57
  // SubMenu Configuration
58
  subMenuOpenDelay?: number;
59
  subMenuCloseDelay?: number;
60
  forceSubMenuRender?: boolean;
61
  triggerSubMenuAction?: 'click' | 'hover';
62
  builtinPlacements?: Record<string, any>;
63
  
64
  // Icons
65
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
66
  expandIcon?: React.ReactNode | ((props: any) => React.ReactNode);
67
  overflowedIndicator?: React.ReactNode;
68
  overflowedIndicatorPopupClassName?: string;
69
  
70
  // Container Function
71
  getPopupContainer?: (node: HTMLElement) => HTMLElement;
72
}
73
```
74

75
**Usage Examples:**
76

77
```typescript
78
import Menu, { MenuItem, SubMenu } from "rc-menu";
79

80
// Basic vertical menu
81
<Menu mode="vertical" defaultSelectedKeys={['1']}>
82
  <MenuItem key="1">Option 1</MenuItem>
83
  <MenuItem key="2">Option 2</MenuItem>
84
</Menu>
85

86
// Horizontal menu with selection
87
<Menu 
88
  mode="horizontal" 
89
  selectable={true}
90
  multiple={true}
91
  onSelect={(info) => console.log('Selected:', info.selectedKeys)}
92
>
93
  <MenuItem key="1">Home</MenuItem>
94
  <MenuItem key="2">About</MenuItem>
95
  <MenuItem key="3">Contact</MenuItem>
96
</Menu>
97

98
// Inline menu with controlled state
99
const [selectedKeys, setSelectedKeys] = useState(['1']);
100
const [openKeys, setOpenKeys] = useState(['sub1']);
101

102
<Menu
103
  mode="inline"
104
  selectedKeys={selectedKeys}
105
  openKeys={openKeys}
106
  onSelect={(info) => setSelectedKeys(info.selectedKeys)}
107
  onOpenChange={setOpenKeys}
108
>
109
  <MenuItem key="1">Navigation One</MenuItem>
110
  <SubMenu key="sub1" title="Sub Menu">
111
    <MenuItem key="2">Option 1</MenuItem>
112
    <MenuItem key="3">Option 2</MenuItem>
113
  </SubMenu>
114
</Menu>
115
```
116

117
### Menu Ref Interface
118

119
Reference interface for Menu component providing programmatic control.
120

121
```typescript { .api }
122
/**
123
 * Reference interface for Menu component
124
 */
125
interface MenuRef {
126
  /**
127
   * Focus active child if any, or the first child which is not disabled
128
   * @param options - Focus options
129
   */
130
  focus: (options?: FocusOptions) => void;
131
  /** Direct access to the underlying list element */
132
  list: HTMLUListElement;
133
}
134
```
135

136
**Usage Example:**
137

138
```typescript
139
import { useRef } from 'react';
140
import Menu, { MenuItem } from 'rc-menu';
141

142
const menuRef = useRef<MenuRef>(null);
143

144
const focusMenu = () => {
145
  menuRef.current?.focus();
146
};
147

148
<Menu ref={menuRef}>
149
  <MenuItem key="1">Option 1</MenuItem>
150
  <MenuItem key="2">Option 2</MenuItem>
151
</Menu>
152
```
153

154
### Selection Modes
155

156
Different selection behaviors and configurations.
157

158
**Single Selection (Default):**
159

160
```typescript
161
<Menu selectable={true} defaultSelectedKeys={['1']}>
162
  <MenuItem key="1">Option 1</MenuItem>
163
  <MenuItem key="2">Option 2</MenuItem>
164
</Menu>
165
```
166

167
**Multiple Selection:**
168

169
```typescript
170
<Menu 
171
  selectable={true} 
172
  multiple={true} 
173
  defaultSelectedKeys={['1', '3']}
174
  onSelect={(info) => console.log('Selected:', info.selectedKeys)}
175
  onDeselect={(info) => console.log('Deselected:', info.selectedKeys)}
176
>
177
  <MenuItem key="1">Option 1</MenuItem>
178
  <MenuItem key="2">Option 2</MenuItem>
179
  <MenuItem key="3">Option 3</MenuItem>
180
</Menu>
181
```
182

183
**Non-selectable Menu:**
184

185
```typescript
186
<Menu selectable={false} onClick={(info) => console.log('Clicked:', info.key)}>
187
  <MenuItem key="1">Action 1</MenuItem>
188
  <MenuItem key="2">Action 2</MenuItem>
189
</Menu>
190
```
191

192
### Animation Configuration
193

194
Configure animations for different menu modes and transitions.
195

196
```typescript
197
const customMotions = {
198
  inline: {
199
    motionName: 'rc-menu-collapse',
200
    onAppearStart: () => ({ height: 0 }),
201
    onAppearActive: () => ({ height: 'auto' }),
202
    onLeaveStart: () => ({ height: 'auto' }),
203
    onLeaveActive: () => ({ height: 0 }),
204
  },
205
  vertical: {
206
    motionName: 'slide-up',
207
  },
208
  horizontal: {
209
    motionName: 'zoom-big',
210
  },
211
};
212

213
<Menu mode="inline" defaultMotions={customMotions}>
214
  <SubMenu key="sub1" title="Animated SubMenu">
215
    <MenuItem key="1">Option 1</MenuItem>
216
    <MenuItem key="2">Option 2</MenuItem>
217
  </SubMenu>
218
</Menu>
219
```
220

221
### Event Handling
222

223
Comprehensive event handling for different interaction patterns.
224

225
```typescript
226
const handleClick = (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
227
  console.log('Clicked item:', info.key);
228
  console.log('Key path:', info.keyPath);
229
  console.log('DOM event:', info.domEvent);
230
};
231

232
const handleSelect = (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
233
  console.log('Selected item:', info.key);
234
  console.log('All selected keys:', info.selectedKeys);
235
};
236

237
const handleOpenChange = (openKeys: string[]) => {
238
  console.log('Open submenus:', openKeys);
239
};
240

241
<Menu
242
  onClick={handleClick}
243
  onSelect={handleSelect}
244
  onOpenChange={handleOpenChange}
245
>
246
  {/* Menu items */}
247
</Menu>
248
```