0
# Layout Components
1

2
Layout components provide structure and organization within menus, including grouping related items and adding visual separators for improved menu hierarchy and readability.
3

4
## Capabilities
5

6
### MenuItemGroup Component
7

8
Groups related menu items under a common title, providing visual organization and semantic structure.
9

10
```typescript { .api }
11
/**
12
 * Groups related menu items under a common title
13
 * @param props - Menu item group configuration props
14
 * @returns React component
15
 */
16
declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;
17

18
interface MenuItemGroupProps {
19
  // Content
20
  title?: React.ReactNode;
21
  children?: React.ReactNode;
22
}
23
```
24

25
**Usage Examples:**
26

27
```typescript
28
import Menu, { MenuItem, MenuItemGroup } from "rc-menu";
29

30
// Basic item group
31
<Menu>
32
  <MenuItemGroup title="Navigation">
33
    <MenuItem key="1">Home</MenuItem>
34
    <MenuItem key="2">About</MenuItem>
35
    <MenuItem key="3">Contact</MenuItem>
36
  </MenuItemGroup>
37
  <MenuItemGroup title="Account">
38
    <MenuItem key="4">Profile</MenuItem>
39
    <MenuItem key="5">Settings</MenuItem>
40
    <MenuItem key="6">Logout</MenuItem>
41
  </MenuItemGroup>
42
</Menu>
43

44
// Group with custom title styling
45
<MenuItemGroup 
46
  title={<span style={{ color: '#1890ff', fontWeight: 'bold' }}>Admin Tools</span>}
47
>
48
  <MenuItem key="admin1">User Management</MenuItem>
49
  <MenuItem key="admin2">System Settings</MenuItem>
50
</MenuItemGroup>
51

52
// Group with custom styling
53
<MenuItemGroup 
54
  title="Recent Files"
55
  className="recent-files-group"
56
  style={{ background: '#f5f5f5' }}
57
>
58
  <MenuItem key="file1">Document.pdf</MenuItem>
59
  <MenuItem key="file2">Spreadsheet.xlsx</MenuItem>
60
</MenuItemGroup>
61
```
62

63
### Divider Component
64

65
Visual separator component for creating sections within menus.
66

67
```typescript { .api }
68
/**
69
 * Visual separator for creating sections within menus
70
 * @param props - Divider configuration props
71
 * @returns React component
72
 */
73
declare const Divider: React.FunctionComponent<DividerProps>;
74

75
interface DividerProps {
76
  // Styling
77
  className?: string;
78
  style?: React.CSSProperties;
79
}
80
```
81

82
**Usage Examples:**
83

84
```typescript
85
import Menu, { MenuItem, Divider } from "rc-menu";
86

87
// Basic divider usage
88
<Menu>
89
  <MenuItem key="1">Cut</MenuItem>
90
  <MenuItem key="2">Copy</MenuItem>
91
  <MenuItem key="3">Paste</MenuItem>
92
  <Divider />
93
  <MenuItem key="4">Delete</MenuItem>
94
  <MenuItem key="5">Select All</MenuItem>
95
</Menu>
96

97
// Custom styled divider
98
<Divider 
99
  style={{ 
100
    margin: '8px 0', 
101
    borderTop: '2px solid #1890ff' 
102
  }} 
103
/>
104

105
// Divider with custom class
106
<Divider className="custom-menu-divider" />
107
```
108

109
### Combined Layout Patterns
110

111
Effective combinations of groups and dividers for complex menu structures.
112

113
**Grouped Sections with Dividers:**
114

115
```typescript
116
<Menu>
117
  <MenuItemGroup title="File Operations">
118
    <MenuItem key="new">New File</MenuItem>
119
    <MenuItem key="open">Open File</MenuItem>
120
    <MenuItem key="save">Save File</MenuItem>
121
  </MenuItemGroup>
122
  
123
  <Divider />
124
  
125
  <MenuItemGroup title="Edit Operations">
126
    <MenuItem key="cut">Cut</MenuItem>
127
    <MenuItem key="copy">Copy</MenuItem>
128
    <MenuItem key="paste">Paste</MenuItem>
129
  </MenuItemGroup>
130
  
131
  <Divider />
132
  
133
  <MenuItemGroup title="View Options">
134
    <MenuItem key="zoom-in">Zoom In</MenuItem>
135
    <MenuItem key="zoom-out">Zoom Out</MenuItem>
136
    <MenuItem key="fullscreen">Fullscreen</MenuItem>
137
  </MenuItemGroup>
138
</Menu>
139
```
140

141
**Mixed Content Organization:**
142

143
```typescript
144
<Menu>
145
  <MenuItem key="dashboard">Dashboard</MenuItem>
146
  <MenuItem key="analytics">Analytics</MenuItem>
147
  
148
  <Divider />
149
  
150
  <MenuItemGroup title="Content Management">
151
    <MenuItem key="posts">Posts</MenuItem>
152
    <MenuItem key="pages">Pages</MenuItem>
153
    <MenuItem key="media">Media</MenuItem>
154
  </MenuItemGroup>
155
  
156
  <Divider />
157
  
158
  <MenuItem key="settings">Settings</MenuItem>
159
  <MenuItem key="help">Help</MenuItem>
160
</Menu>
161
```
162

163
### Nested Groups in SubMenus
164

165
Item groups can be used within SubMenus for hierarchical organization.
166

167
```typescript
168
import { SubMenu, MenuItemGroup, MenuItem } from "rc-menu";
169

170
<Menu mode="vertical">
171
  <MenuItem key="home">Home</MenuItem>
172
  
173
  <SubMenu key="admin" title="Administration">
174
    <MenuItemGroup title="User Management">
175
      <MenuItem key="users">All Users</MenuItem>
176
      <MenuItem key="roles">User Roles</MenuItem>
177
      <MenuItem key="permissions">Permissions</MenuItem>
178
    </MenuItemGroup>
179
    
180
    <MenuItemGroup title="System">
181
      <MenuItem key="config">Configuration</MenuItem>
182
      <MenuItem key="logs">System Logs</MenuItem>
183
      <MenuItem key="backup">Backup</MenuItem>
184
    </MenuItemGroup>
185
  </SubMenu>
186
</Menu>
187
```
188

189
### Accessibility and Semantic Structure
190

191
Layout components enhance menu accessibility and semantic meaning.
192

193
```typescript
194
// Semantic grouping for screen readers
195
<Menu role="menu">
196
  <MenuItemGroup title="Primary Navigation" role="group">
197
    <MenuItem key="1" role="menuitem">Home</MenuItem>
198
    <MenuItem key="2" role="menuitem">Products</MenuItem>
199
    <MenuItem key="3" role="menuitem">Services</MenuItem>
200
  </MenuItemGroup>
201
  
202
  <Divider role="separator" />
203
  
204
  <MenuItemGroup title="Account Actions" role="group">
205
    <MenuItem key="4" role="menuitem">Login</MenuItem>
206
    <MenuItem key="5" role="menuitem">Register</MenuItem>
207
  </MenuItemGroup>
208
</Menu>
209
```
210

211
### Dynamic Group Content
212

213
Create dynamic groups based on data or user state.
214

215
```typescript
216
interface GroupData {
217
  title: string;
218
  items: Array<{ key: string; label: string; }>;
219
}
220

221
const menuGroups: GroupData[] = [
222
  {
223
    title: "Recently Used",
224
    items: [
225
      { key: "recent1", label: "Project A" },
226
      { key: "recent2", label: "Project B" },
227
    ]
228
  },
229
  {
230
    title: "All Projects",
231
    items: [
232
      { key: "proj1", label: "Project 1" },
233
      { key: "proj2", label: "Project 2" },
234
      { key: "proj3", label: "Project 3" },
235
    ]
236
  }
237
];
238

239
<Menu>
240
  {menuGroups.map((group, index) => (
241
    <React.Fragment key={group.title}>
242
      {index > 0 && <Divider />}
243
      <MenuItemGroup title={group.title}>
244
        {group.items.map(item => (
245
          <MenuItem key={item.key}>{item.label}</MenuItem>
246
        ))}
247
      </MenuItemGroup>
248
    </React.Fragment>
249
  ))}
250
</Menu>
251
```
252

253
### Styling and Theming
254

255
Customize the appearance of layout components to match your design system.
256

257
```typescript
258
// Custom group title styling
259
<MenuItemGroup 
260
  title={
261
    <div style={{ 
262
      display: 'flex', 
263
      alignItems: 'center', 
264
      fontSize: '12px',
265
      fontWeight: 600,
266
      color: '#666',
267
      textTransform: 'uppercase',
268
      letterSpacing: '0.5px'
269
    }}>
270
      <IconComponent style={{ marginRight: 8 }} />
271
      Group Title
272
    </div>
273
  }
274
>
275
  <MenuItem key="1">Item 1</MenuItem>
276
  <MenuItem key="2">Item 2</MenuItem>
277
</MenuItemGroup>
278

279
// Custom divider styling
280
<Divider 
281
  style={{ 
282
    height: '1px',
283
    background: 'linear-gradient(to right, transparent, #ddd, transparent)',
284
    margin: '12px 16px',
285
    border: 'none'
286
  }} 
287
/>
288
```