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.MenuOr via the dotnet CLI.
dotnet add package Blazored.MenuAdd 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.MenuUsage
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.
