Blazored Menu

A JavaScript free menu library for Blazor and Razor Components applications.

Getting Setup

You can install the package via the nuget package manager just search for Blazored.Menu. You can also install via powershell using the following command.

Install-Package Blazored.Menu

Or via the dotnet CLI.

dotnet add package Blazored.Menu

Add reference to style sheet

Add the following line to the head tag of your index.html (Blazor WebAssembly App) or _Host.cshtml (Blazor Server app).

<link href="_content/Blazored.Menu/blazored-menu.css" rel="stylesheet" />

Add Imports

Add the following to your _Imports.razor

@using Blazored.Menu

Usage

Blazored Menu allows menus to be built either using markup or dynamically, using the MenuBuilder.

Building a menu with markup

You can build your menus using the following components.

• BlazoredMenu
• BlazoredMenuItem
• BlazoredSubMenu

For example.

<BlazoredMenu>
  <BlazoredMenuItem>
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
  </BlazoredMenuItem>
  <BlazoredSubMenu Header="Sub Menu">
        <MenuTemplate>
            <BlazoredMenuItem>
                <NavLink href="counter">Counter</NavLink>
            </BlazoredMenuItem>
        </MenuTemplate>
    </BlazoredSubMenu>
    <BlazoredMenuItem>
        <NavLink href="fetchdata">Fetch data</NavLink>
    </BlazoredMenuItem>
</BlazoredMenu>

You can also specify your own template for sub menu headers like so.

<BlazoredMenu>
  <BlazoredMenuItem>
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
  </BlazoredMenuItem>
  <BlazoredSubMenu Header="Sub Menu">
        <HeaderTemplate>
            <i class="my-cool-icon-class"></i> Sub Menu
        </HeaderTemplate>
        <MenuTemplate>
            <BlazoredMenuItem>
                <NavLink href="counter">Counter</NavLink>
            </BlazoredMenuItem>
            <BlazoredMenuItem>
                <NavLink href="fetchdata">Fetch data</NavLink>
            </BlazoredMenuItem>
        </MenuTemplate>
    </BlazoredSubMenu>
</BlazoredMenu>

This feature is currently only available when building menus with markup.

You can also supply your own CSS classes to each of the 3 components

• BlazoredMenu
• BlazoredMenuItem
• BlazoredSubMenu

By setting the Css parameter.

<BlazoredMenu Css="custom-menu-css">
  <BlazoredMenuItem Css="custom-menuitem-css">
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
  </BlazoredMenuItem>
  <BlazoredSubMenu Header="Sub Menu" Css="custom-submenu-css">
        <HeaderTemplate>
            <i class="my-cool-icon-class"></i> Sub Menu
        </HeaderTemplate>
        <MenuTemplate>
            <BlazoredMenuItem>
                <NavLink href="counter">Counter</NavLink>
            </BlazoredMenuItem>
            <BlazoredMenuItem>
                <NavLink href="fetchdata">Fetch data</NavLink>
            </BlazoredMenuItem>
        </MenuTemplate>
    </BlazoredSubMenu>
</BlazoredMenu>

Building a menu dynamically using the MenuBuilder

If you prefer you can use the MenuBuilder to create your menus using C#. The MenuBuilder exposes two methods AddItem and AddSubMenu. You can build the same menu from the markup example as follows.

<BlazoredMenu MenuBuilder="@MenuBuilder" />

@functions {
    MenuBuilder MenuBuilder = new MenuBuilder();

    protected override void OnInit()
    {
        MenuBuilder.AddItem(1, "Home", "/")
                   .AddSubMenu(2, "Sub Menu", new MenuBuilder().AddItem(1, "Counter", "counter")
                   .AddItem(3, "FetchData", "fetchdata");
    }
}

MenuBuilder Options

When using the MenuBuilder you have a couple of extra options available via the AddItem and AddSubMenu methods.

• IsEnabled (default: true)
• IsVisible (default: true)

You can use these options to manipulate your menu items. IsVisible, if set to false, will mark your menu items as display: none making them invisible. Setting IsEnabled to false will render the item in a non-interactive state.