Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Menu component is generally used for menu navigation, i.e. redirect navigation by clicking on the address bar after the menu, but sometimes you don't need navigation in real life, by setting OnClick callback delegate, custom processing logic, at this point by setting Property The of TheableNavigation, in this case all Menu are set to true disable navigation because they are analog menu clicks and do not actually navigate the address bar

A wide range of basic usages are applicable.

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@Items" DisableNavigation="true" OnClick="@OnClickMenu" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? Items { get; set; }

    private Task OnClickMenu(MenuItem item)
    {
        Trace.Log($"菜单点击项: {item.Text}");
        return Task.CompletedTask;
    }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        Items = await MenusDataGerator.GetTopItemsAsync(Localizer);
    }
}

Bottom bar

Set the parameter IsBottom value is true menu bar at the bottom of the container, for the mover

Demo

Tips

Because the bottom bar menu is relatively positioned relative to the parent container, you need to set the parent node style position-, or customize the style theposition-fixed

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<div style="height: 120px; position: relative;">
    <div>@ClickedMenuItemText</div>
    <Menu Items="@BottomItems" DisableNavigation="true" OnClick="@OnClickBottomMenu" IsBottom="true" />
</div>

@code {
    private string? ClickedMenuItemText { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? BottomItems { get; set; }

    private Task OnClickBottomMenu(MenuItem item)
    {
        ClickedMenuItemText = item.Text;
        StateHasChanged();
        return Task.CompletedTask;
    }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        BottomItems = await MenusDataGerator.GetBottomMenuItemsAsync(Localizer);
    }
}

Top bar menu with icon

For simple website apps, set the menu icon by setting the menu item the Icon property of the MenuItem

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@IconItems" DisableNavigation="true" />

@code {
    [NotNull]
    private IEnumerable<MenuItem>? IconItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        IconItems = await MenusDataGerator.GetTopIconItemsAsync(Localizer);
    }
}

Sidebar

For sites with left and right structure layouts, change the navigation menu to sidebar by setting IsVertical

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@SideMenuItems" DisableNavigation="true" IsVertical="true" OnClick="@OnClickSideMenu" style="width:220px; border-right: 1px solid #e6e6e6; padding-right: 4px;" />
<BlockLogger @ref="TraceSideMenu" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? TraceSideMenu { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? SideMenuItems { get; set; }

    private Task OnClickSideMenu(MenuItem item)
    {
        TraceSideMenu?.Log($"菜单点击项: {item.Text}");
        return Task.CompletedTask;
    }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        SideMenuItems = await MenusDataGerator.GetSideMenuItemsAsync(Localizer);
    }
}

Sidebar menu with icon

Set the menu icon by setting the menu item the Icon property of the MenuItem

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6; width:220px;" />

@code {
    [NotNull]
    private IEnumerable<MenuItem>? IconSideMenuItems { get; set; }
    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        IconSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(Localizer);
    }
}

Sidebar for accordion effects

Set the accordion effect sidebar menu by setting the IsAccordion property

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true" IsAccordion="true" style="border-right: 1px solid #e6e6e6; width:220px;" />

@code {
    [NotNull]
    private IEnumerable<MenuItem>? IconSideMenuItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        IconSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(Localizer);
    }
}

Sidebar effect with shrink

Set the sidebar menu to the put-away state by setting the IsCollapsed property

Demo

Tips

Note that the IsCollapsed property is available only if the IsVertical is true, i.e. only sidebar menus

In this example, the layout component Layout is used to build a web page, set the SideWith'0' turn off the sidebar width setting, and use the internal menu width from fit

@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<div class="layout-menu-demo">
    <Layout SideWidth="0" IsFullSide="true" ShowFooter="true" ShowCollapseBar="true" Menus="IconSideMenuItems">
        <Header>
            <div class="menu-demo-header">
                @Localizer["MenusClickShrinkSpanSpan"]
            </div>
        </Header>
        <Side>
            <div class="layout-banner">
                <img class="layout-logo" src="_content/BootstrapBlazor.Shared/images/logo.png" />
                <div class="layout-title">
                    <span>@Localizer["MenusClickShrinkMenuTitle"]</span>
                </div>
            </div>
        </Side>
        <Main>
            <div style="padding: 10rem 1rem;">Main</div>
        </Main>
        <Footer>
            <a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
        </Footer>
    </Layout>
</div>

@code {
    [NotNull]
    private IEnumerable<MenuItem>? IconSideMenuItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        IconSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(Localizer);
    }
}

Menu with pendant

Set the custom component into the menu by setting the Component property of the MenuItem



    Demo

    
            System

            Website

            Task

            Authorize

            User

            Menu

            Role

            Log
10

            Access

            Login

            Operation
10
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@WidgetIconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6; width:220px;" />

@code {
    [NotNull]
    private IEnumerable<MenuItem>? WidgetIconSideMenuItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        WidgetIconSideMenuItems = await MenusDataGerator.GetWidgetIconSideMenuItemsAsync(Localizer);
    }
}



Custom node shrinkage
    

    Set whether the node is receding by setting the IsCollapsed property of the MenuItem

    Demo

    In this example, the permission settingsnode is expanded and the remaining nodes are in the recess state

            System

            Website

            Task

            Authorize

            User

            Menu

            Role

            Log

            Access

            Login

            Operation
@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@CollapsedIconSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6; width:220px;" />

@code {
    [NotNull]
    private IEnumerable<MenuItem>? CollapsedIconSideMenuItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        CollapsedIconSideMenuItems = await MenusDataGerator.GetCollapsedIconSideMenuItemsAsync(Localizer);
    }
}

                    

                
                    

Dynamically change the menu
    

    Change the menu item by dynamically setting Theitems property values

    Demo

    
            Menu1

            Menu2

            Sub Menu 1

            Sub Menu 11

            Sub Menu 12

            Sub Menu 2

            Sub Menu 21

            Sub Menu 22

            Sub Menu 31

            Sub Menu 32

            Sub Menu 41

            Sub Menu 42

            Sub Menu 3

            Menu3


@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@DynamicSideMenuItems" DisableNavigation="true" IsVertical="true" style="border-right: 1px solid #e6e6e6; width:220px;" class="mb-3" />
<Button Text="@Localizer["MenusDynamicButton1Text"]" OnClick="UpdateMenu" />
<Button Text="@Localizer["MenusDynamicButton2Text"]" OnClick="ResetMenu" />

@code {
    [NotNull]
    private IEnumerable<MenuItem>? DynamicSideMenuItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        DynamicSideMenuItems = await MenusDataGerator.GetSideMenuItemsAsync(Localizer);
    }

    private async Task UpdateMenu()
    {
        DynamicSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(Localizer);
    }

    private async Task ResetMenu()
    {
        DynamicSideMenuItems = await MenusDataGerator.GetSideMenuItemsAsync(Localizer);
    }
}

                    

                
                    

Some menus disable functionality
    

    Set whether the node is disabled by setting the IsDisabled property of theMenuItem

    Demo

    In this example navigation two node is disabled and the menu and its submenu are not clickable
Menu1
            Sub Menu 1
Menu2
Menu3
            Sub Menu 3

Example of a disablement of the sidebar

            Menu1

            Sub Menu 1

        Menu2

            Menu3

            Sub Menu 3


@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Menus> Localizer

<Menu Items="@DisabledMenuItems" DisableNavigation="true" OnClick="@OnClick2" />
<p class="mt-3"><b>@Localizer["MenusPartDisableDescription2"]</b></p>
<div style="width:220px; border-right: 1px solid #e6e6e6;">
    <Menu Items="@DisabledMenuItems" DisableNavigation="true" IsVertical="true" OnClick="@OnClick2" />
</div>

<BlockLogger @ref="Trace2" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace2 { get; set; }

    [NotNull]
    private IEnumerable<MenuItem>? DisabledMenuItems { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        DisabledMenuItems = await MenusDataGerator.GetDisabledMenuItemsAsync(Localizer);
    }
    private Task OnClick2(MenuItem item)
    {
        Trace2.Log($"菜单点击项: {item.Text}");
        return Task.CompletedTask;
    }
}

                    

                
                    

Attributes

    
            
            
            
            Loading...



B station related video link
No

交流群

QQ Group：BootstrapAdmin & Blazor
    795206915
    675147445
    Welcome to join the group discussion

Menu

A list of menus that provide navigation for pages and features.

Tips

Demo

Demo

Tips

Demo

Demo

Demo

Demo

Demo

Tips

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01