Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Web Only

This component is only available for web frameworks (Vue, React, Angular). Desktop menubar patterns are not suitable for mobile platforms.

Installation

npm

npx @galaxy-stack/nebula-cli@latest add menubar

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add menubar

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add menubar

bun

bunx @galaxy-stack/nebula-cli@latest add menubar

global

# If you have installed galaxy-design globally
galaxy-design add menubar

Usage

API Reference

Menubar Props

Prop	Type	Default	Description	Frameworks
value	string	-	Controlled open menu value	Web only
defaultValue	string	-	Initial open menu value (uncontrolled)	Web only
onValueChange	(value: string) => void	-	Called when open menu value changes	Web only
dir	'ltr' | 'rtl'	'ltr'	Reading direction for keyboard navigation	Web only
loop	boolean	false	Loop keyboard focus from last to first	Web only
className	string	''	CSS class names for menubar root	Web only

MenubarMenu Props

Prop	Type	Default	Description	Frameworks
value	string	-	Unique value associated with menu	Web only

MenubarTrigger Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only

MenubarContent Props

Prop	Type	Default	Description	Frameworks
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Preferred side	Web only
align	'start' | 'center' | 'end'	'start'	Alignment	Web only
className	string	''	CSS class names	Web only

MenubarItem Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only
disabled	boolean	false	Disables the item	Web only

MenubarSeparator Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only

MenubarCheckboxItem Props

Prop	Type	Default	Description	Frameworks
checked	boolean	-	Controlled checked state	Web only
className	string	''	CSS class names	Web only

MenubarRadioGroup Props

Prop	Type	Default	Description	Frameworks
value	string	-	Controlled value	Web only
onValueChange	(value: string) => void	-	Called when value changes	Web only

MenubarRadioItem Props

Prop	Type	Default	Description	Frameworks
value	string	-	Radio item value	Web only
className	string	''	CSS class names	Web only

MenubarSub Props

Prop	Type	Default	Description	Frameworks
open	boolean	-	Controlled open state	Web only
defaultOpen	boolean	false	Default open state	Web only
onOpenChange	(open: boolean) => void	-	Called when open state changes	Web only

MenubarSubTrigger Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only

MenubarSubContent Props

Prop	Type	Default	Description	Frameworks
side	'top' | 'right' | 'bottom' | 'left'	'right'	Preferred side	Web only
align	'start' | 'center' | 'end'	'start'	Alignment	Web only
className	string	''	CSS class names	Web only

MenubarLabel Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only

MenubarSeparator Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only

MenubarShortcut Props

Prop	Type	Default	Description	Frameworks
className	string	''	CSS class names	Web only

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)