Vibe UI
Initializing Vibe UI System...
Vibe UI

Menubar

A responsive navigation menu bar utilizing Radix UI primitives, custom styled for Vibe UI variants.

Menubar

A responsive navigation menu bar utilizing Radix UI primitives, custom styled for Vibe UI variants.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add menubar

Themes

Explore aesthetic design themes side-by-side.

Examples

Interactive features including submenus, checkable items, radio selections, keyboard shortcuts, destructive alerts, disabled items, and settings groups.

Props

Menubar

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'The visual aesthetic theme to apply across the menubar and its child items.

MenubarContent

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Aesthetic theme variant styling to apply to popover menu content.
align'start' | 'center' | 'end''start'Alignment of the popover content relative to the trigger button.
alignOffsetnumber-4An offset in pixels from the start or end alignment edges.
sideOffsetnumber8Distance in pixels between the trigger and the popover menu content.

MenubarItem

PropTypeDefaultDescription
insetbooleanfalseAdds left padding to visually align items with checkbox or radio items.
variant'default' | 'destructive''default'Applies destructive danger styling for irreversible actions like resetting or deleting.
disabledbooleanfalsePrevents user interaction and applies dimmed opacity styling.

MenubarCheckboxItem

PropTypeDefaultDescription
checkedboolean | 'indeterminate'falseThe controlled checked state of the checkbox menu item.
onCheckedChange(checked: boolean) => void-Event handler called when the checked state changes.
disabledbooleanfalsePrevents user interaction and applies dimmed opacity styling.

MenubarRadioItem

PropTypeDefaultDescription
valuestring-The unique string value for this radio option.
disabledbooleanfalsePrevents user interaction and applies dimmed opacity styling.

MenubarSubTrigger

PropTypeDefaultDescription
insetbooleanfalseAdds left padding to align with items that have leading indicators.
disabledbooleanfalsePrevents expanding the submenu and applies dimmed opacity styling.

MenubarSubContent

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow' | 'cyberpunk''default'Aesthetic theme variant styling to apply to nested submenu popover content.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Menubar | Vibe UI