Introduction
A breadcrumb is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. Breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point. In this article, let’s discuss how to implement breadcrumbs for WebAssembly Project
Getting Started – Initial Setup
Create Project
- Create a Blazor WebAssembly Project and it in the location.
Install NuGet Package
Install MudBlazor package by running the below code
dotnet add package MudBlazor
Implementation
Add Imports
After installing the package, we need to add the following in to _Imports.razor
@using MudBlazor
Add Style & Font references
Add the following to our HTML head section, it’s either index.html
, since we are implementing this in WebAssembly
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
In the HTML body section of index.html
add this code
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
Register Services
Since Blazor WebAssembly add the following to our Program.Main
using MudBlazor.Services;
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddMudServices();
await builder.Build().RunAsync();
}
Add Components
Add the following components to our App.razor
note that the ThemeProvider
is essential for MudBlazor but the rest is optional.
<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
Implement MudBlazor’s Breadcrumbs in Component
Write this following code in our Index.razor component.
@page "/"
<MudBreadcrumbs Items="_items"></MudBreadcrumbs>
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Home", href: "/"),
new BreadcrumbItem("Fetch Data", href: "/fetchdata"),
new BreadcrumbItem("Counter", href: "/counter")
};
}

Breadcrumbs Properties
- Items – A list of breadcrumb items/links.
- Separator – Specifies the separator between the items.
- SeparatorTemplate – Specifies a RenderFragment to use as the separator.
- ItemTemplate – Specifies a RenderFragment to use as the items’ contents.
- MaxItems – Controls when the breadcrumbs will automatically collapse.
- Class – User class names, separated by space.
- Style – User styles, applied on top of the component’s own classes and styles.
- Tag – Use Tag to attach any user data object to the component for your convenience.
- UserAttributes – UserAttributes carries all attributes you add to the component that don’t match any of its parameters
Example
Separator
@page "/"
<MudBreadcrumbs Items="_items" Separator=">"></MudBreadcrumbs>
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Home", href: "#"),
new BreadcrumbItem("Fetch Data", href: "#"),
new BreadcrumbItem("Counter", href: null, disabled: true)
};
}

SeparatorTemplate
@page "/"
<MudBreadcrumbs Items="_items">
<SeparatorTemplate>
<MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" />
</SeparatorTemplate>
</MudBreadcrumbs>
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Home", href: "#"),
new BreadcrumbItem("Fetch Data", href: "#"),
new BreadcrumbItem("Counter", href: null, disabled: true)
};
}

Item Icon
@page "/"
<MudBreadcrumbs Items="_items"></MudBreadcrumbs>
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Home", href: "#", icon: Icons.Material.Filled.Home),
new BreadcrumbItem("Videos", href: "#", icon: Icons.Material.Filled.VideoLibrary),
new BreadcrumbItem("Create", href: null, disabled: true, icon: Icons.Material.Filled.Create)
};
}

Item Template
@page "/"
<MudBreadcrumbs Items="_items">
<ItemTemplate Context="item">
<MudLink Href="@item.Href">@item.Text.ToUpper()</MudLink>
</ItemTemplate>
</MudBreadcrumbs>
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Home", href: "#"),
new BreadcrumbItem("Link 1", href: "#"),
new BreadcrumbItem("Link 2", href:"#")
};
}

MaxItems
@page "/"
<MudBreadcrumbs Items="_items" MaxItems="5"></MudBreadcrumbs>
@code {
private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
{
new BreadcrumbItem("Home", href: "#"),
new BreadcrumbItem("Link 1", href: "#"),
new BreadcrumbItem("Link 2", href: "#"),
new BreadcrumbItem("Link 3", href: "#"),
new BreadcrumbItem("Link 4", href: null, disabled: true)
};
}

Note: When we set the MaxItems
parameter in order to automatically collapse the breadcrumbs when it exceeds a number of items.
Conclusion
In this article, we had a look on How to implement Breadcrumbs in our WebAssembly project. Hope this was useful, and lets discuss other features in upcoming articles. Please share your feedback in the comment section.