Components / Menubar

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands: role="menubar" with roving arrow-key navigation, follow-focus, submenus, and checkbox / radio items. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

razor
<ZitsMenubar>
    <ZitsMenubarMenu Value="file">
        <ZitsMenubarTrigger>File</ZitsMenubarTrigger>
        <ZitsMenubarContent>
            <ZitsMenubarItem>New Tab <ZitsMenubarShortcut>⌘T</ZitsMenubarShortcut></ZitsMenubarItem>
            <ZitsMenubarItem Disabled>New Incognito Window</ZitsMenubarItem>
            <ZitsMenubarSeparator />
            <ZitsMenubarSub>
                <ZitsMenubarSubTrigger>Share</ZitsMenubarSubTrigger>
                <ZitsMenubarSubContent>
                    <ZitsMenubarItem>Email link</ZitsMenubarItem>
                    <ZitsMenubarItem>Messages</ZitsMenubarItem>
                </ZitsMenubarSubContent>
            </ZitsMenubarSub>
        </ZitsMenubarContent>
    </ZitsMenubarMenu>
    <ZitsMenubarMenu Value="view">
        <ZitsMenubarTrigger>View</ZitsMenubarTrigger>
        <ZitsMenubarContent>
            <ZitsMenubarCheckboxItem @bind-Checked="_fullUrls">Always Show Full URLs</ZitsMenubarCheckboxItem>
            <ZitsMenubarSeparator />
            <ZitsMenubarRadioGroup @bind-Value="_profile">
                <ZitsMenubarRadioItem Value="andy">Andy</ZitsMenubarRadioItem>
                <ZitsMenubarRadioItem Value="benoit">Benoit</ZitsMenubarRadioItem>
            </ZitsMenubarRadioGroup>
        </ZitsMenubarContent>
    </ZitsMenubarMenu>
</ZitsMenubar>

@code {
    private bool? _fullUrls = true;
    private string? _profile = "benoit";
}

Installation

Terminal bash
navius add menubar

API reference

ZitsMenubar

Prop Type Default
Value string? -
DefaultValue string? -
Orientation string "horizontal"
Dir string? -
Loop bool false

ZitsMenubarMenu

Prop Type Default
Value string -

ZitsMenubarContent

Prop Type Default
Align string "start"
AlignOffset double -4
SideOffset double 8

ZitsMenubarItem

Prop Type Default
Inset bool false
Disabled bool false
TextValue string? -
OnSelect EventCallback<NaviusSelectEventArgs> -

ZitsMenubarCheckboxItem

Prop Type Default
Checked bool? -
DefaultChecked bool? -
Disabled bool false
OnSelect EventCallback<NaviusSelectEventArgs> -

ZitsMenubarRadioGroup / ZitsMenubarRadioItem

Prop Type Default
Value string? -
DefaultValue string? -
Disabled bool false

ZitsMenubarSub

Prop Type Default
Open bool false
DefaultOpen bool false
Inset (SubTrigger) bool false