A JavaScript free menu library for Blazor and Razor Components applications.
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 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 the following to your _Imports.razor
@using Blazored.MenuBlazored Menu allows menus to be built either using markup or dynamically, using the MenuBuilder.
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>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");
}
}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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent