@neynar/ui
Version:
React UI component library built on shadcn/ui and Tailwind CSS
115 lines (101 loc) • 3.12 kB
Markdown
# Menubar
**Type**: component
A visually persistent menu common in desktop applications that provides access to a consistent set of commands. Menubar provides a horizontal navigation structure similar to desktop application menus like those found in VS Code, Figma, or native applications. Each menu contains dropdown content with actions, checkboxes, radio groups, and nested submenus. Built on top of Radix UI Menubar primitive with full keyboard navigation and accessibility support.
## JSX Usage
```jsx
import { Menubar } from '@neynar/ui';
<Menubar
className="value"
defaultValue="value"
value="value"
onValueChange={handleValueChange}
dir={value}
loop={true}
/>
```
## Component Props
### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available
### defaultValue
- **Type**: `string`
- **Required**: No
- **Description**: No description available
### value
- **Type**: `string`
- **Required**: No
- **Description**: No description available
### onValueChange
- **Type**: `(value: string) => void`
- **Required**: No
- **Description**: No description available
### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available
### loop
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available
## Examples
### Example 1
```tsx
// Basic application menubar
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New File <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
<MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
<MenubarSeparator />
<MenubarItem>Exit</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
<MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
```
### Example 2
```tsx
// With checkboxes and submenus
<Menubar>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
Show Toolbar
</MenubarCheckboxItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Panels</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Explorer</MenubarItem>
<MenubarItem>Terminal</MenubarItem>
</MenubarSubContent>
</MenubarSub>
</MenubarContent>
</MenubarMenu>
</Menubar>
```
### Example 3
```tsx
// With radio groups for exclusive selections
<Menubar>
<MenubarMenu>
<MenubarTrigger>Theme</MenubarTrigger>
<MenubarContent>
<MenubarRadioGroup value={theme} onValueChange={setTheme}>
<MenubarRadioItem value="light">Light</MenubarRadioItem>
<MenubarRadioItem value="dark">Dark</MenubarRadioItem>
<MenubarRadioItem value="system">System</MenubarRadioItem>
</MenubarRadioGroup>
</MenubarContent>
</MenubarMenu>
</Menubar>
```