Menubar
A menubar component for creating application-level navigation menus with dropdowns and submenus
Installation
Terminal
Import
Component.tsx
Basic
Basic: The simplest usage of Menubar.
Features:
- Horizontal menu bar layout
- Click to open menu, hover to switch after opening
- Standard menu items and dividers
- Icon-only trigger support
- Mutually exclusive menu opening (only one open at a time)
Use cases:
- Application main menu bar
- Navigation menus
- Command menus
Light
Light: Demonstrates Menubar with light variant.
Features:
- Light background styling for dropdown content
- Suitable for dark backgrounds or specific design contexts
- All functionality remains the same as default variant
Use cases:
- Menus on dark backgrounds
- Alternative visual styling
- Design system consistency
Offset
Offset: Demonstrates Menubar with custom dropdown offset.
Features:
- Custom spacing between trigger and dropdown
- Configurable via dropdownProps.offset
- Default offset is 4px
Use cases:
- Adjusting visual spacing
- Accommodating different design requirements
- Creating visual hierarchy
With Icons
WithIcons: Demonstrates Menubar with icons.
Features:
- Icons in Trigger using prefixElement
- Consistent menu item styling
- Visual recognition enhancement
- Mixed icon and text triggers
Use cases:
- Application menus with visual indicators
- Toolbar-style menus
- Enhanced user experience
With Divider
WithDivider: Demonstrates Menubar with dividers to separate groups.
Features:
- Visual separation between menu groups
- Vertical divider styling
- Semantic separation (role="separator")
- Customizable via className
Use cases:
- Grouping related menu items
- Separating primary and secondary actions
- Creating visual hierarchy in menu bars
Disabled
Disabled: Demonstrates disabled Menubar functionality.
Features:
- Entire menubar can be disabled
- Individual menu items can be disabled
- Keyboard navigation skips disabled items
- Visual feedback for disabled states
- Useful for conditional availability
Use cases:
- Conditional menu availability
- Permission-based menus
- Read-only interfaces
API reference
| MenubarProps | Type | Default |
|---|---|---|
children | ReactNode | - |
disabled | boolean |undefined | - |
loopFocus | boolean |undefined | - |
dropdownProps | MenubarDropdownProps |undefined | - |
| MenubarDivider | Type | Default |
ref | ((instance: HTMLDivElement |null) => void) |RefObject<HTMLDivElement> |null |undefined | - |
| MenubarItemProps | Type | Default |
placement | undefined |"top" |"right" |"bottom" |"left" |"top-start" |"top-end" |"right-start" |"right-end" |"bottom-start" |"bottom-end" |"left-start" |"left-end" | - |
disabled | boolean |undefined | - |
readOnly | boolean |undefined | - |
variant | undefined |"default" |"light" |"reset" | - |
autoSelectFirstItem | boolean |undefined | true |
avoidCollisions | boolean |undefined | true |
disabledNested | boolean |undefined | - |
focusManagerProps | Partial<FloatingFocusManagerProps> |undefined | - |
matchTriggerWidth | boolean |undefined | - |
offset | number |undefined | - |
portalId | string |undefined | - |
position | { x: number; y: number; } |null |undefined | - |
root | HTMLElement |null |undefined | - |
selection | boolean |undefined | - |
triggerRef | RefObject<HTMLElement> |undefined | - |
triggerSelector | string |undefined | - |
| MenubarTriggerProps | Type | Default |
className | string |undefined | - |
size | undefined |"default" |"large" | - |
as | ElementType<any, keyof IntrinsicElements> |undefined | - |
readOnly | boolean |undefined | - |
active | boolean |undefined | - |
asChild | boolean |undefined | - |
focused | boolean |undefined | - |
loading | boolean |undefined | - |
variant | undefined |"link" |"reset" |"primary" |"secondary" |"solid" |"destructive" |"secondary-destruct" |"inverse" |"success" |"link-danger" |"ghost" |"dark" | - |
prefixElement | ReactNode | - |
suffixElement | ReactNode | - |
ref | ((instance: HTMLButtonElement |null) => void) |RefObject<HTMLButtonElement> |null |undefined | - |