0
# Layout Components
1

2
Components for organizing and structuring menu layout including groups, labels, separators, and arrows. These components help create well-organized and visually structured dropdown menus.
3

4
## Capabilities
5

6
### DropdownMenuGroup (Group)
7

8
Container component for grouping related menu items together, providing semantic organization.
9

10
```typescript { .api }
11
/**
12
 * Container for grouping related menu items
13
 * Provides semantic grouping without visual changes
14
 */
15
interface DropdownMenuGroupProps {
16
  children?: React.ReactNode;
17
}
18

19
const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps>;
20
```
21

22
**Usage Examples:**
23

24
```typescript
25
<DropdownMenu.Content>
26
  <DropdownMenu.Group>
27
    <DropdownMenu.Item>New File</DropdownMenu.Item>
28
    <DropdownMenu.Item>New Folder</DropdownMenu.Item>
29
  </DropdownMenu.Group>
30
  
31
  <DropdownMenu.Separator />
32
  
33
  <DropdownMenu.Group>
34
    <DropdownMenu.Item>Cut</DropdownMenu.Item>
35
    <DropdownMenu.Item>Copy</DropdownMenu.Item>
36
    <DropdownMenu.Item>Paste</DropdownMenu.Item>
37
  </DropdownMenu.Group>
38
</DropdownMenu.Content>
39
```
40

41
### DropdownMenuLabel (Label)
42

43
Label component for providing section headers and descriptions within menu groups.
44

45
```typescript { .api }
46
/**
47
 * Label component for menu sections
48
 * Provides descriptive text that doesn't receive focus
49
 * @param asChild - Compose with child element
50
 */
51
interface DropdownMenuLabelProps {
52
  asChild?: boolean;
53
  children?: React.ReactNode;
54
}
55

56
const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps>;
57
```
58

59
**Usage Examples:**
60

61
```typescript
62
<DropdownMenu.Content>
63
  <DropdownMenu.Label>File Operations</DropdownMenu.Label>
64
  <DropdownMenu.Item>New File</DropdownMenu.Item>
65
  <DropdownMenu.Item>Open File</DropdownMenu.Item>
66
  
67
  <DropdownMenu.Separator />
68
  
69
  <DropdownMenu.Label>Edit Operations</DropdownMenu.Label>
70
  <DropdownMenu.Item>Cut</DropdownMenu.Item>
71
  <DropdownMenu.Item>Copy</DropdownMenu.Item>
72
</DropdownMenu.Content>
73

74
// Custom label using asChild
75
<DropdownMenu.Label asChild>
76
  <h3 className="menu-section-header">Recent Files</h3>
77
</DropdownMenu.Label>
78
```
79

80
### DropdownMenuSeparator (Separator)
81

82
Visual separator component for creating distinct sections within the menu.
83

84
```typescript { .api }
85
/**
86
 * Visual separator for creating menu sections
87
 * Renders as a horizontal line between menu items
88
 */
89
interface DropdownMenuSeparatorProps {
90
  children?: React.ReactNode;
91
}
92

93
const DropdownMenuSeparator: React.ForwardRefExoticComponent<DropdownMenuSeparatorProps>;
94
```
95

96
**Usage Examples:**
97

98
```typescript
99
<DropdownMenu.Content>
100
  <DropdownMenu.Item>New</DropdownMenu.Item>
101
  <DropdownMenu.Item>Open</DropdownMenu.Item>
102
  
103
  <DropdownMenu.Separator />
104
  
105
  <DropdownMenu.Item>Settings</DropdownMenu.Item>
106
  <DropdownMenu.Item>Help</DropdownMenu.Item>
107
  
108
  <DropdownMenu.Separator />
109
  
110
  <DropdownMenu.Item>Quit</DropdownMenu.Item>
111
</DropdownMenu.Content>
112
```
113

114
### DropdownMenuArrow (Arrow)
115

116
Arrow component that points from the menu content to the trigger element.
117

118
```typescript { .api }
119
/**
120
 * Arrow pointing from content to trigger element
121
 * @param width - Width of the arrow in pixels
122
 * @param height - Height of the arrow in pixels
123
 * @param asChild - Compose with child element
124
 */
125
interface DropdownMenuArrowProps {
126
  width?: number;
127
  height?: number;
128
  asChild?: boolean;
129
}
130

131
const DropdownMenuArrow: React.ForwardRefExoticComponent<DropdownMenuArrowProps>;
132
```
133

134
**Usage Examples:**
135

136
```typescript
137
<DropdownMenu.Content>
138
  <DropdownMenu.Arrow />
139
  <DropdownMenu.Item>Menu Item</DropdownMenu.Item>
140
</DropdownMenu.Content>
141

142
// Custom sized arrow
143
<DropdownMenu.Content>
144
  <DropdownMenu.Arrow width={10} height={5} />
145
  <DropdownMenu.Item>Menu Item</DropdownMenu.Item>
146
</DropdownMenu.Content>
147

148
// Custom arrow using asChild
149
<DropdownMenu.Content>
150
  <DropdownMenu.Arrow asChild>
151
    <div className="custom-arrow" />
152
  </DropdownMenu.Arrow>
153
  <DropdownMenu.Item>Menu Item</DropdownMenu.Item>
154
</DropdownMenu.Content>
155
```
156

157
## Complete Layout Example
158

159
```typescript
160
function ComplexDropdownMenu() {
161
  const [showGrid, setShowGrid] = React.useState(false);
162
  const [viewMode, setViewMode] = React.useState('list');
163

164
  return (
165
    <DropdownMenu.Root>
166
      <DropdownMenu.Trigger>View Options</DropdownMenu.Trigger>
167
      
168
      <DropdownMenu.Portal>
169
        <DropdownMenu.Content>
170
          <DropdownMenu.Arrow />
171
          
172
          <DropdownMenu.Label>View Settings</DropdownMenu.Label>
173
          
174
          <DropdownMenu.Group>
175
            <DropdownMenu.CheckboxItem 
176
              checked={showGrid}
177
              onCheckedChange={setShowGrid}
178
            >
179
              <DropdownMenu.ItemIndicator>✓</DropdownMenu.ItemIndicator>
180
              Show Grid
181
            </DropdownMenu.CheckboxItem>
182
          </DropdownMenu.Group>
183
          
184
          <DropdownMenu.Separator />
185
          
186
          <DropdownMenu.Label>View Mode</DropdownMenu.Label>
187
          
188
          <DropdownMenu.RadioGroup value={viewMode} onValueChange={setViewMode}>
189
            <DropdownMenu.RadioItem value="list">
190
              <DropdownMenu.ItemIndicator>●</DropdownMenu.ItemIndicator>
191
              List View
192
            </DropdownMenu.RadioItem>
193
            <DropdownMenu.RadioItem value="grid">
194
              <DropdownMenu.ItemIndicator>●</DropdownMenu.ItemIndicator>
195
              Grid View
196
            </DropdownMenu.RadioItem>
197
          </DropdownMenu.RadioGroup>
198
          
199
          <DropdownMenu.Separator />
200
          
201
          <DropdownMenu.Group>
202
            <DropdownMenu.Item>Refresh</DropdownMenu.Item>
203
            <DropdownMenu.Item>Reset View</DropdownMenu.Item>
204
          </DropdownMenu.Group>
205
        </DropdownMenu.Content>
206
      </DropdownMenu.Portal>
207
    </DropdownMenu.Root>
208
  );
209
}
210
```
211

212
## Component Aliases
213

214
```typescript { .api }
215
// Short aliases for composition patterns
216
const Group = DropdownMenuGroup;
217
const Label = DropdownMenuLabel;
218
const Separator = DropdownMenuSeparator;
219
const Arrow = DropdownMenuArrow;
220
```
221

222
These layout components help create well-structured and visually organized dropdown menus with proper semantic grouping and visual separation.