Menubar

Menubar provides desktop-style command menus with keyboard navigation, nested submenus, separators, checkboxes, radio groups, shortcuts, and disabled items. It mirrors the shadcn/ui menubar API while keeping RizzyUI's SSR-first architecture and Alpine.js behavior model.

The default Tailwind utility classes in this suite are intentionally aligned with the shadcn/ui menubar reference implementation, including trigger focus text color, content animation/state classes, and muted separator styling.

Basic Menubar

Start with top-level menus and action items. This pattern is ideal for file and edit commands.

Source

<RzMenubar>
    <MenubarMenu Value="file">
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>New Tab</MenubarItem>
            <MenubarItem>New Window</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Open...</MenubarItem>
            <MenubarItem Disabled="true">Save As...</MenubarItem>
        </MenubarContent>
    </MenubarMenu>
    <MenubarMenu Value="edit">
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>Undo</MenubarItem>
            <MenubarItem>Redo</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Cut</MenubarItem>
            <MenubarItem>Copy</MenubarItem>
            <MenubarItem>Paste</MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</RzMenubar>

Commands with Icons and Shortcuts

Use icons and shortcuts to improve scanability for frequent desktop actions.

Source

<RzMenubar>
    <MenubarMenu Value="file-shortcuts">
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarItem Icon="MdiIcon.FileOutline">New File<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
            <MenubarItem Icon="MdiIcon.FolderOpenOutline">Open...<MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
            <MenubarSeparator />
            <MenubarItem Icon="MdiIcon.ContentSaveOutline">Save<MenubarShortcut>⌘S</MenubarShortcut></MenubarItem>
            <MenubarItem Icon="MdiIcon.FileExportOutline">Export<MenubarShortcut>⇧⌘E</MenubarShortcut></MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</RzMenubar>

Checkbox and Radio Item Groups

Use checkbox items for independent toggles and radio groups for mutually exclusive selections.

Source

<RzMenubar>
    <MenubarMenu Value="view">
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
            <MenubarCheckboxItem Checked="true">Status Bar</MenubarCheckboxItem>
            <MenubarCheckboxItem Checked="true">Activity Panel</MenubarCheckboxItem>
            <MenubarCheckboxItem>Secondary Sidebar</MenubarCheckboxItem>
            <MenubarSeparator />
            <MenubarLabel>Panel Density</MenubarLabel>
            <MenubarRadioGroup Name="panel-density">
                <MenubarRadioItem Value="default" Checked="true">Default</MenubarRadioItem>
                <MenubarRadioItem Value="compact">Compact</MenubarRadioItem>
                <MenubarRadioItem Value="comfortable">Comfortable</MenubarRadioItem>
            </MenubarRadioGroup>
        </MenubarContent>
    </MenubarMenu>
</RzMenubar>

Nested Submenus

Submenus let you group related actions without overloading the first level.

Source

<RzMenubar>
    <MenubarMenu Value="share">
        <MenubarTrigger>Share</MenubarTrigger>
        <MenubarContent>
            <MenubarSub>
                <MenubarSubTrigger>Email</MenubarSubTrigger>
                <MenubarSubContent>
                    <MenubarItem>Send as Link</MenubarItem>
                    <MenubarItem>Send as Attachment</MenubarItem>
                </MenubarSubContent>
            </MenubarSub>
            <MenubarSub>
                <MenubarSubTrigger>Invite</MenubarSubTrigger>
                <MenubarSubContent>
                    <MenubarItem>Copy Invite Link</MenubarItem>
                    <MenubarItem>Invite by Username</MenubarItem>
                    <MenubarSeparator />
                    <MenubarItem Disabled="true">Manage Access</MenubarItem>
                </MenubarSubContent>
            </MenubarSub>
        </MenubarContent>
    </MenubarMenu>
    <MenubarMenu Value="help">
        <MenubarTrigger>Help</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>Documentation</MenubarItem>
            <MenubarItem>Keyboard Shortcuts</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Release Notes</MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</RzMenubar>

Destructive Menubar Items

Use Variant="MenubarItemVariant.Destructive" for destructive commands like delete operations. This maps to data-variant="destructive" so theme styling can target dangerous actions.

Source

<RzMenubar>
    <MenubarMenu Value="project-actions">
        <MenubarTrigger>Project</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>Archive Project</MenubarItem>
            <MenubarItem Variant="MenubarItemVariant.Destructive">Delete Project</MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</RzMenubar>

Alpine API

Menubar interactivity is implemented with Alpine.js. The root menubar uses rzMenubar, and nested flyout menus use rzMenubarSubmenu. This keeps the component SSR-first while still supporting keyboard and pointer interactions without Blazor event handlers.

rzMenubar methods

Method	Parameters	Description
`openMenu`	`value: string, trigger: HTMLElement`	Opens the specified top-level menu and positions content with Floating UI.
`closeMenus`	`—`	Closes the active top-level menu and clears trigger state.
`handleTriggerKeydown`	`event: KeyboardEvent`	Handles Enter/Space/ArrowDown to open and ArrowLeft/ArrowRight to move between triggers.
`handleItemMouseEnter / handleItemMouseLeave`	`event: MouseEvent`	Keeps hover highlighting synchronized with pointer position and closes sibling submenus when moving across menu items.
`toggleCheckboxItem`	`event: Event`	Toggles `data-state` and `aria-checked` for checkbox menu items.
`selectRadioItem`	`event: Event`	Selects a radio item and clears previous selection in the same group.

rzMenubarSubmenu methods

Method	Parameters	Description
`openSubmenu / forceCloseSubmenu`	`—`	Opens a submenu from its trigger and force-closes it whenever the parent menubar menu closes.
`closeSubmenu`	`—`	Closes the submenu and resets keyboard focus index.
`openSubmenuAndFocusFirst`	`—`	Opens the submenu and focuses the first item for keyboard navigation.
`focusNextItem / focusPreviousItem`	`—`	Cycles focus through submenu items with wraparound behavior.