0
# Menu Items
1

2
Menu items are the individual interactive elements within a menu, providing click handling, icon support, disabled states, and mouse interaction events.
3

4
## Capabilities
5

6
### MenuItem Component
7

8
Individual menu item component with comprehensive interaction and styling options.
9

10
```typescript { .api }
11
/**
12
 * Individual menu item component
13
 * @param props - Menu item configuration props
14
 * @returns React component
15
 */
16
declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
17

18
interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onSelect'> {
19
  // Content
20
  children?: React.ReactNode;
21
  
22
  // State
23
  disabled?: boolean;
24
  
25
  // Icons and Extras
26
  itemIcon?: React.ReactNode | ((props: any) => React.ReactNode);
27
  extra?: React.ReactNode;
28
  
29
  // Event Handlers
30
  onMouseEnter?: (info: { key: string; domEvent: React.MouseEvent }) => void;
31
  onMouseLeave?: (info: { key: string; domEvent: React.MouseEvent }) => void;
32
}
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import Menu, { MenuItem } from "rc-menu";
39

40
// Basic menu item
41
<MenuItem key="1">Home</MenuItem>
42

43
// Menu item with icon
44
<MenuItem key="2" itemIcon={<HomeIcon />}>
45
  Home
46
</MenuItem>
47

48
// Disabled menu item
49
<MenuItem key="3" disabled>
50
  Disabled Item
51
</MenuItem>
52

53
// Menu item with extra content
54
<MenuItem key="4" extra={<Badge count={5} />}>
55
  Messages
56
</MenuItem>
57

58
// Menu item with hover handlers
59
<MenuItem
60
  key="5"
61
  onMouseEnter={(info) => console.log('Mouse enter:', info.key)}
62
  onMouseLeave={(info) => console.log('Mouse leave:', info.key)}
63
>
64
  Hover Me
65
</MenuItem>
66
```
67

68
### Dynamic Icon Rendering
69

70
Icons can be static React nodes or dynamic functions that receive state information.
71

72

73
**Usage Examples:**
74

75
```typescript
76
// Static icon
77
<MenuItem key="1" itemIcon={<UserIcon />}>
78
  Profile
79
</MenuItem>
80

81
// Dynamic icon based on selection state
82
<MenuItem
83
  key="2"
84
  itemIcon={({ isSelected, disabled }) => (
85
    isSelected ? <FilledStarIcon /> : <OutlineStarIcon />
86
  )}
87
>
88
  Favorites
89
</MenuItem>
90

91
// Dynamic icon with disabled state
92
<MenuItem
93
  key="3"
94
  disabled={isProcessing}
95
  itemIcon={({ disabled }) => (
96
    disabled ? <LoadingIcon /> : <SaveIcon />
97
  )}
98
>
99
  Save
100
</MenuItem>
101
```
102

103
### Menu Item States
104

105
Understanding different states and their visual representation.
106

107
**Selection States:**
108

109
```typescript
110
// Selected item (when parent Menu has selectable=true)
111
<Menu selectable defaultSelectedKeys={['selected']}>
112
  <MenuItem key="selected">Selected Item</MenuItem>
113
  <MenuItem key="unselected">Unselected Item</MenuItem>
114
</Menu>
115

116
// Active item (keyboard navigation focus)
117
<Menu defaultActiveFirst>
118
  <MenuItem key="1">First Item (Active)</MenuItem>
119
  <MenuItem key="2">Second Item</MenuItem>
120
</Menu>
121
```
122

123
**Disabled State:**
124

125
```typescript
126
<Menu>
127
  <MenuItem key="1">Normal Item</MenuItem>
128
  <MenuItem key="2" disabled>Disabled Item</MenuItem>
129
  <MenuItem key="3">Another Normal Item</MenuItem>
130
</Menu>
131
```
132

133
### Extra Content and Advanced Layouts
134

135
Menu items can contain additional content beyond text and icons.
136

137
```typescript
138
import { Badge, Tag, Switch } from 'antd';
139

140
<Menu>
141
  <MenuItem key="1" extra={<Badge count={3} />}>
142
    Messages
143
  </MenuItem>
144
  
145
  <MenuItem key="2" extra={<Tag color="red">New</Tag>}>
146
    Features
147
  </MenuItem>
148
  
149
  <MenuItem key="3" extra={<Switch size="small" />}>
150
    Notifications
151
  </MenuItem>
152
  
153
  <MenuItem key="4">
154
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
155
      <span>Custom Layout</span>
156
      <span style={{ color: '#999', fontSize: '12px' }}>Ctrl+K</span>
157
    </div>
158
  </MenuItem>
159
</Menu>
160
```
161

162
### Event Handling
163

164
Menu items support various mouse interaction events.
165

166
```typescript
167
const handleItemHover = (info: { key: string; domEvent: React.MouseEvent }) => {
168
  console.log(`Hovering over item: ${info.key}`);
169
  // Access DOM event for additional information
170
  console.log('Mouse position:', info.domEvent.clientX, info.domEvent.clientY);
171
};
172

173
const handleItemLeave = (info: { key: string; domEvent: React.MouseEvent }) => {
174
  console.log(`Left item: ${info.key}`);
175
};
176

177
<Menu>
178
  <MenuItem
179
    key="1"
180
    onMouseEnter={handleItemHover}
181
    onMouseLeave={handleItemLeave}
182
  >
183
    Hover-sensitive Item
184
  </MenuItem>
185
</Menu>
186
```
187

188
### Integration with Menu Container Events
189

190
Menu items work seamlessly with Menu container events for comprehensive interaction handling.
191

192
```typescript
193
const handleMenuClick = (info: { key: string; keyPath: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
194
  console.log('Menu clicked:', info.key);
195
  console.log('Key path:', info.keyPath); // ['1'] for top-level, ['sub1', '1'] for nested
196
};
197

198
const handleMenuSelect = (info: { key: string; keyPath: string[]; selectedKeys: string[]; domEvent: React.MouseEvent | React.KeyboardEvent }) => {
199
  console.log('Menu selected:', info.key);
200
  console.log('All selected:', info.selectedKeys);
201
};
202

203
<Menu onClick={handleMenuClick} onSelect={handleMenuSelect} selectable>
204
  <MenuItem key="1">Item 1</MenuItem>
205
  <MenuItem key="2">Item 2</MenuItem>
206
  <SubMenu key="sub1" title="Sub Menu">
207
    <MenuItem key="3">Nested Item</MenuItem>
208
  </SubMenu>
209
</Menu>
210
```