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.