Blazor Blueprint Blazor Blueprint
Previous Menu Next Navigation Menu

Menubar

A headless menubar primitive providing the behavioral foundation for horizontal desktop-style menu bars. Manages menu state, cross-menu navigation, keyboard navigation via JS interop, type-ahead search, and ARIA attributes — without any default styling.

Unstyled Menubar

A basic headless menubar with multiple menus. This primitive provides all the behavior (keyboard navigation, ARIA, open/close state) without any styling — you bring your own CSS. Use the styled BbMenubar component from the Components library for pre-built Tailwind styles.
<BbMenubar>
    <BbMenubarMenu>
        <BbMenubarTrigger>File</BbMenubarTrigger>
        <BbMenubarContent>
            <BbMenubarItem OnClick="NewFile">New File</BbMenubarItem>
            <BbMenubarItem OnClick="OpenFile">Open</BbMenubarItem>
            <BbMenubarSeparator />
            <BbMenubarItem OnClick="SaveFile">Save</BbMenubarItem>
        </BbMenubarContent>
    </BbMenubarMenu>
    <BbMenubarMenu>
        <BbMenubarTrigger>Edit</BbMenubarTrigger>
        <BbMenubarContent>
            <BbMenubarItem OnClick="Undo">Undo</BbMenubarItem>
            <BbMenubarSeparator />
            <BbMenubarLabel>Options</BbMenubarLabel>
            <BbMenubarCheckboxItem @bind-Checked="wordWrap">
                Word Wrap
            </BbMenubarCheckboxItem>
        </BbMenubarContent>
    </BbMenubarMenu>
</BbMenubar>

Anatomy

<BbMenubar>
    <BbMenubarMenu>
        <BbMenubarTrigger />
        <BbMenubarContent>
            <BbMenubarLabel />
            <BbMenubarItem />
            <BbMenubarCheckboxItem />
            <BbMenubarSeparator />
        </BbMenubarContent>
    </BbMenubarMenu>
</BbMenubar>
View source on GitHub
Previous Menu Next Navigation Menu