0
# Menu Items and Layout
1

2
Components for organizing and displaying menu items with various layouts, including basic items, grouping, labeling, and visual separation.
3

4
## Capabilities
5

6
### MenubarItem (Item)
7

8
Basic interactive menu item that can be selected and responds to keyboard and mouse interactions.
9

10
```typescript { .api }
11
/**
12
 * Interactive menu item that can be selected
13
 * @param props - Menu item props
14
 * @returns JSX element representing the menu item
15
 */
16
function MenubarItem(props: MenubarItemProps): React.ReactElement;
17

18
interface MenubarItemProps extends React.ComponentPropsWithoutRef<'div'> {
19
  /** Whether the item is disabled */
20
  disabled?: boolean;
21
  /** Callback fired when the item is selected */
22
  onSelect?: (event: SelectEvent) => void;
23
  /** Text value for accessibility (used by screen readers) */
24
  textValue?: string;
25
}
26
```
27

28
**Usage Examples:**
29

30
```typescript
31
'use client';
32
import * as Menubar from "@radix-ui/react-menubar";
33

34
// Basic menu item
35
<Menubar.Item onSelect={() => console.log("New file")}>
36
  New File
37
</Menubar.Item>
38

39
// Disabled menu item
40
<Menubar.Item disabled>
41
  Recent Files
42
</Menubar.Item>
43

44
// Item with custom text value for accessibility
45
<Menubar.Item 
46
  textValue="Save document"
47
  onSelect={handleSave}
48
>
49
  Save <span style={{ opacity: 0.6 }}>Ctrl+S</span>
50
</Menubar.Item>
51
```
52

53
### MenubarGroup (Group)
54

55
Groups related menu items together, providing semantic organization and optional styling.
56

57
```typescript { .api }
58
/**
59
 * Groups related menu items together
60
 * @param props - Group container props
61
 * @returns JSX element representing the group
62
 */
63
function MenubarGroup(props: MenubarGroupProps): React.ReactElement;
64

65
interface MenubarGroupProps extends React.ComponentPropsWithoutRef<'div'> {
66
  /** Child menu items to group together */
67
  children?: React.ReactNode;
68
}
69
```
70

71
**Usage Examples:**
72

73
```typescript
74
// Basic grouping
75
<Menubar.Group>
76
  <Menubar.Item>Cut</Menubar.Item>
77
  <Menubar.Item>Copy</Menubar.Item>
78
  <Menubar.Item>Paste</Menubar.Item>
79
</Menubar.Group>
80

81
// Multiple groups with separators
82
<Menubar.Content>
83
  <Menubar.Group>
84
    <Menubar.Item>New</Menubar.Item>
85
    <Menubar.Item>Open</Menubar.Item>
86
  </Menubar.Group>
87
  
88
  <Menubar.Separator />
89
  
90
  <Menubar.Group>
91
    <Menubar.Item>Save</Menubar.Item>
92
    <Menubar.Item>Save As</Menubar.Item>
93
  </Menubar.Group>
94
</Menubar.Content>
95
```
96

97
### MenubarLabel (Label)
98

99
Non-interactive label for menu sections, providing context and organization without being selectable.
100

101
```typescript { .api }
102
/**
103
 * Non-interactive label for menu sections
104
 * @param props - Label props
105
 * @returns JSX element representing the label
106
 */
107
function MenubarLabel(props: MenubarLabelProps): React.ReactElement;
108

109
interface MenubarLabelProps extends React.ComponentPropsWithoutRef<'div'> {
110
  /** Label text or content */
111
  children?: React.ReactNode;
112
}
113
```
114

115
**Usage Examples:**
116

117
```typescript
118
// Section label
119
<Menubar.Content>
120
  <Menubar.Label>File Operations</Menubar.Label>
121
  <Menubar.Item>New</Menubar.Item>
122
  <Menubar.Item>Open</Menubar.Item>
123
  
124
  <Menubar.Separator />
125
  
126
  <Menubar.Label>Recent Files</Menubar.Label>
127
  <Menubar.Item>document.txt</Menubar.Item>
128
  <Menubar.Item>project.json</Menubar.Item>
129
</Menubar.Content>
130

131
// Styled label
132
<Menubar.Label className="menu-section-header">
133
  Export Options
134
</Menubar.Label>
135
```
136

137
### MenubarSeparator (Separator)
138

139
Visual separator between groups of menu items, improving organization and visual hierarchy.
140

141
```typescript { .api }
142
/**
143
 * Visual separator between menu item groups
144
 * @param props - Separator props
145
 * @returns JSX element representing the separator
146
 */
147
function MenubarSeparator(props: MenubarSeparatorProps): React.ReactElement;
148

149
interface MenubarSeparatorProps extends React.ComponentPropsWithoutRef<'div'> {
150
  /** Whether the separator is decorative only (default: false) */
151
  decorative?: boolean;
152
}
153
```
154

155
**Usage Examples:**
156

157
```typescript
158
// Basic separator
159
<Menubar.Content>
160
  <Menubar.Item>New</Menubar.Item>
161
  <Menubar.Item>Open</Menubar.Item>
162
  
163
  <Menubar.Separator />
164
  
165
  <Menubar.Item>Exit</Menubar.Item>
166
</Menubar.Content>
167

168
// Decorative separator (screen reader friendly)
169
<Menubar.Separator decorative />
170

171
// Custom styled separator
172
<Menubar.Separator className="thick-separator" />
173
```
174

175
## Layout Patterns
176

177
### Grouped Menu Structure
178

179
```typescript
180
// Complete menu with grouped items
181
<Menubar.Content>
182
  <Menubar.Label>File Operations</Menubar.Label>
183
  <Menubar.Group>
184
    <Menubar.Item onSelect={handleNew}>New</Menubar.Item>
185
    <Menubar.Item onSelect={handleOpen}>Open</Menubar.Item>
186
    <Menubar.Item onSelect={handleOpenRecent}>Open Recent</Menubar.Item>
187
  </Menubar.Group>
188
  
189
  <Menubar.Separator />
190
  
191
  <Menubar.Label>Save Operations</Menubar.Label>
192
  <Menubar.Group>
193
    <Menubar.Item onSelect={handleSave}>Save</Menubar.Item>
194
    <Menubar.Item onSelect={handleSaveAs}>Save As...</Menubar.Item>
195
    <Menubar.Item onSelect={handleSaveAll}>Save All</Menubar.Item>
196
  </Menubar.Group>
197
  
198
  <Menubar.Separator />
199
  
200
  <Menubar.Item onSelect={handleExit}>Exit</Menubar.Item>
201
</Menubar.Content>
202
```
203

204
### Keyboard Shortcuts Display
205

206
```typescript
207
// Menu items with keyboard shortcuts
208
<Menubar.Content>
209
  <Menubar.Item onSelect={handleNew}>
210
    <span>New File</span>
211
    <span className="shortcut">Ctrl+N</span>
212
  </Menubar.Item>
213
  <Menubar.Item onSelect={handleOpen}>
214
    <span>Open</span>
215
    <span className="shortcut">Ctrl+O</span>
216
  </Menubar.Item>
217
  <Menubar.Item onSelect={handleSave}>
218
    <span>Save</span>
219
    <span className="shortcut">Ctrl+S</span>
220
  </Menubar.Item>
221
</Menubar.Content>
222
```
223

224
## Type Definitions
225

226
```typescript { .api }
227
// Element reference types
228
type MenubarItemElement = HTMLDivElement;
229
type MenubarGroupElement = HTMLDivElement;
230
type MenubarLabelElement = HTMLDivElement;
231
type MenubarSeparatorElement = HTMLDivElement;
232

233
// Event types
234
interface SelectEvent {
235
  preventDefault(): void;
236
  target: HTMLElement;
237
}
238
```