0
# Radix UI React Menubar
1

2
Radix UI React Menubar is a comprehensive collection of React components for building accessible menubar interfaces. It provides keyboard navigation, submenu support, and complete accessibility features while maintaining semantic HTML structure and screen reader compatibility.
3

4
## Package Information
5

6
- **Package Name**: @radix-ui/react-menubar
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @radix-ui/react-menubar`
10

11
## Core Imports
12

13
```typescript
14
'use client';
15
import * as Menubar from "@radix-ui/react-menubar";
16
```
17

18
Or import specific components:
19

20
```typescript
21
'use client';
22
import { 
23
  Menubar, 
24
  MenubarMenu, 
25
  MenubarTrigger, 
26
  MenubarContent, 
27
  MenubarItem 
28
} from "@radix-ui/react-menubar";
29
```
30

31
Alternative short-form imports:
32

33
```typescript
34
'use client';
35
import { 
36
  Root, 
37
  Menu, 
38
  Trigger, 
39
  Content, 
40
  Item 
41
} from "@radix-ui/react-menubar";
42
```
43

44
## Basic Usage
45

46
```typescript
47
'use client';
48
import * as Menubar from "@radix-ui/react-menubar";
49

50
function MenubarDemo() {
51
  return (
52
    <Menubar.Root>
53
      <Menubar.Menu>
54
        <Menubar.Trigger>File</Menubar.Trigger>
55
        <Menubar.Portal>
56
          <Menubar.Content>
57
            <Menubar.Item>New File</Menubar.Item>
58
            <Menubar.Item>Open</Menubar.Item>
59
            <Menubar.Separator />
60
            <Menubar.Item>Exit</Menubar.Item>
61
          </Menubar.Content>
62
        </Menubar.Portal>
63
      </Menubar.Menu>
64
      
65
      <Menubar.Menu>
66
        <Menubar.Trigger>Edit</Menubar.Trigger>
67
        <Menubar.Portal>
68
          <Menubar.Content>
69
            <Menubar.Item>Cut</Menubar.Item>
70
            <Menubar.Item>Copy</Menubar.Item>
71
            <Menubar.Item>Paste</Menubar.Item>
72
          </Menubar.Content>
73
        </Menubar.Portal>
74
      </Menubar.Menu>
75
    </Menubar.Root>
76
  );
77
}
78
```
79

80
## Architecture
81

82
Radix UI React Menubar is built around several key architectural components:
83

84
- **Primitive Foundation**: Built on top of Radix UI primitives for consistent behavior and styling
85
- **Context Management**: Uses React context for state management and component communication
86
- **Focus Management**: Implements roving tabindex pattern for keyboard navigation
87
- **Portal Rendering**: Optional portal-based rendering for dropdown content positioning
88
- **Accessibility-First**: Full ARIA attributes, keyboard navigation, and screen reader support
89
- **Composable Design**: Individual components that can be combined flexibly
90

91
## Capabilities
92

93
### Core Menubar Structure
94

95
Essential components for creating the basic menubar structure and managing overall state.
96

97
```typescript { .api }
98
// Root menubar container
99
function Menubar(props: MenubarProps): React.ReactElement;
100

101
// Individual menu within the menubar
102
function MenubarMenu(props: MenubarMenuProps): React.ReactElement;
103

104
// Button that triggers menu opening
105
function MenubarTrigger(props: MenubarTriggerProps): React.ReactElement;
106

107
// Portal for rendering content outside DOM tree
108
function MenubarPortal(props: MenubarPortalProps): React.ReactElement;
109

110
// Container for menu items
111
function MenubarContent(props: MenubarContentProps): React.ReactElement;
112
```
113

114
[Core Components](./core-components.md)
115

116
### Menu Items and Layout
117

118
Components for organizing and displaying menu items with various interaction patterns.
119

120
```typescript { .api }
121
// Basic interactive menu item
122
function MenubarItem(props: MenubarItemProps): React.ReactElement;
123

124
// Group related menu items
125
function MenubarGroup(props: MenubarGroupProps): React.ReactElement;
126

127
// Non-interactive label for sections
128
function MenubarLabel(props: MenubarLabelProps): React.ReactElement;
129

130
// Visual separator between groups
131
function MenubarSeparator(props: MenubarSeparatorProps): React.ReactElement;
132
```
133

134
[Menu Items and Layout](./menu-items.md)
135

136
### Interactive Menu Items
137

138
Advanced menu items with checkbox, radio button, and visual indicator functionality.
139

140
```typescript { .api }
141
// Menu item with checkbox behavior
142
function MenubarCheckboxItem(props: MenubarCheckboxItemProps): React.ReactElement;
143

144
// Container for radio button items
145
function MenubarRadioGroup(props: MenubarRadioGroupProps): React.ReactElement;
146

147
// Menu item with radio button behavior
148
function MenubarRadioItem(props: MenubarRadioItemProps): React.ReactElement;
149

150
// Visual indicator for checked/selected items
151
function MenubarItemIndicator(props: MenubarItemIndicatorProps): React.ReactElement;
152
```
153

154
[Interactive Items](./interactive-items.md)
155

156
### Submenus and Advanced Features
157

158
Components for creating nested submenus and additional visual elements.
159

160
```typescript { .api }
161
// Container for submenu functionality
162
function MenubarSub(props: MenubarSubProps): React.ReactElement;
163

164
// Trigger that opens a submenu
165
function MenubarSubTrigger(props: MenubarSubTriggerProps): React.ReactElement;
166

167
// Content container for submenu items
168
function MenubarSubContent(props: MenubarSubContentProps): React.ReactElement;
169

170
// Optional arrow pointing from trigger to content
171
function MenubarArrow(props: MenubarArrowProps): React.ReactElement;
172
```
173

174
[Submenus](./submenus.md)
175

176
### Utilities
177

178
Utility functions for advanced usage patterns and context management.
179

180
```typescript { .api }
181
// Creates scoped context for nested menubars
182
function createMenubarScope(): ScopeHook;
183
```
184

185
[Utilities](./utilities.md)
186

187
## Common Type Definitions
188

189
```typescript { .api }
190
// Direction for text and navigation
191
type Direction = 'ltr' | 'rtl';
192

193
// Base element types
194
type MenubarElement = React.ComponentRef<'div'>;
195
type MenubarTriggerElement = React.ComponentRef<'button'>;
196
type MenubarContentElement = HTMLDivElement;
197
type MenubarGroupElement = HTMLDivElement;
198
type MenubarLabelElement = HTMLDivElement;
199
type MenubarItemElement = HTMLDivElement;
200
type MenubarCheckboxItemElement = HTMLDivElement;
201
type MenubarRadioGroupElement = HTMLDivElement;
202
type MenubarRadioItemElement = HTMLDivElement;
203
type MenubarItemIndicatorElement = HTMLSpanElement;
204
type MenubarSeparatorElement = HTMLDivElement;
205
type MenubarArrowElement = SVGSVGElement;
206
type MenubarSubTriggerElement = HTMLDivElement;
207
type MenubarSubContentElement = HTMLDivElement;
208

209
// Scoping types
210
interface Scope {
211
  __scopeMenubar?: string;
212
}
213

214
type ScopeHook = () => Scope;
215

216
// Event types
217
interface FocusOutsideEvent {
218
  target: HTMLElement;
219
  preventDefault(): void;
220
}
221

222
interface InteractOutsideEvent {
223
  target: HTMLElement;
224
  preventDefault(): void;
225
}
226

227
interface PointerDownOutsideEvent {
228
  target: HTMLElement;
229
  preventDefault(): void;
230
}
231

232
interface SelectEvent {
233
  preventDefault(): void;
234
  target: HTMLElement;
235
}
236

237
// State types  
238
type CheckedState = boolean | 'indeterminate';
239

240
// Collection item data
241
interface ItemData {
242
  value: string;
243
  disabled: boolean;
244
}
245
```