Menubar

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

Default

A standard menubar with File, Edit, View, and Help menus.

<Menubar>
    <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarGroup>
                <MenubarItem>
                    New Tab <MenubarShortcut>⌘T</MenubarShortcut>
                </MenubarItem>
                <MenubarItem>
                    New Window <MenubarShortcut>⌘N</MenubarShortcut>
                </MenubarItem>
                <MenubarItem Disabled="true">New Incognito Window</MenubarItem>
            </MenubarGroup>
            <MenubarSeparator />
            <MenubarGroup>
                <MenubarItem>Share</MenubarItem>
                <MenubarItem>Print</MenubarItem>
            </MenubarGroup>
        </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
            <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Cut <MenubarShortcut>⌘X</MenubarShortcut></MenubarItem>
            <MenubarItem>Copy <MenubarShortcut>⌘C</MenubarShortcut></MenubarItem>
            <MenubarItem>Paste <MenubarShortcut>⌘V</MenubarShortcut></MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</Menubar>

Checkbox Items

Use MenubarCheckboxItem for toggleable options.

Status Bar: True | Activity Bar: False | Panel: True

<Menubar>
    <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
            <MenubarCheckboxItem @@bind-Checked="showStatusBar">
                Status Bar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem @@bind-Checked="showActivityBar">
                Activity Bar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem @@bind-Checked="showPanel">
                Panel
            </MenubarCheckboxItem>
        </MenubarContent>
    </MenubarMenu>
</Menubar>

@code {
    private bool showStatusBar = true;
    private bool showActivityBar = false;
    private bool showPanel = true;
}

Radio Items

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

Selected layout: single

<Menubar>
    <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
            <MenubarLabel>Layout</MenubarLabel>
            <MenubarSeparator />
            <MenubarRadioGroup @@bind-Value="layout">
                <MenubarRadioItem Value="single">Single</MenubarRadioItem>
                <MenubarRadioItem Value="split">Split</MenubarRadioItem>
                <MenubarRadioItem Value="grid">Grid</MenubarRadioItem>
            </MenubarRadioGroup>
        </MenubarContent>
    </MenubarMenu>
</Menubar>

@code {
    private string? layout = "single";
}

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

<Menubar>
    <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>New File</MenubarItem>
            <MenubarItem>Open File</MenubarItem>
            <MenubarSeparator />
            <MenubarSub>
                <MenubarSubTrigger>Share</MenubarSubTrigger>
                <MenubarSubContent>
                    <MenubarItem>Email Link</MenubarItem>
                    <MenubarItem>Messages</MenubarItem>
                    <MenubarItem>Airdrop</MenubarItem>
                </MenubarSubContent>
            </MenubarSub>
            <MenubarSeparator />
            <MenubarItem>Print</MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</Menubar>

With Icons

Add SVG icons alongside menu items.

<Menubar>
    <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
            <MenubarItem>
                <!-- File icon -->
                <svg>...</svg>
                New File
                <MenubarShortcut>⌘N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
                <!-- Folder icon -->
                <svg>...</svg>
                Open Folder
                <MenubarShortcut>⌘O</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>
                <!-- Save icon -->
                <svg>...</svg>
                Save
                <MenubarShortcut>⌘S</MenubarShortcut>
            </MenubarItem>
        </MenubarContent>
    </MenubarMenu>
</Menubar>