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. Or in other words, Breadcrumbs gives us an orientation and shows exactly where we are on a website. With breadcrumbs, if we have reached a page we don’t want to be on, we can easily find our way back or go back a step or two and start over. In this article, let’s discuss how to implement breadcrumbs for WebAssembly Project.
Types of Breadcrumbs
  • Location or Hierarchy Based Breadcrumbs
  • Path or History-based breadcrumbs
  • Attribute-Based Breadcrumbs

Getting Started – Initial Setup

Create Project
Install NuGet Package
Install MudBlazor package by running the below code
  1. dotnet add package MudBlazor

Implementation

Add Imports
After installing the package, we need to add the following in to _Imports.razor
  1. @usingMudBlazor
Add Style & Font references
Add the following to our HTML head section, it’s either index.html, since we are implementing this in WebAssembly
  1. <linkhref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"rel="stylesheet"/>
  2. <linkhref="_content/MudBlazor/MudBlazor.min.css"rel="stylesheet"/>
In the HTML body section of index.html add this code
  1. <scriptsrc="_content/MudBlazor/MudBlazor.min.js"></script>
Register Services
Since Blazor WebAssembly add the following to our Program.Main
  1. using MudBlazor.Services;
  2. public static async Task Main(string[] args) {
  3. var builder = WebAssemblyHostBuilder.CreateDefault(args);
  4. builder.RootComponents.Add < App > ("app");
  5. builder.Services.AddScoped(sp => new HttpClient {
  6. BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
  7. });
  8. builder.Services.AddMudServices();
  9. await builder.Build().RunAsync();
  10. }
Add Components
Add the following components to our App.razor note that the ThemeProvider is essential for MudBlazor but the rest is optional.
  1. <MudThemeProvider/>
  2. <MudDialogProvider/>
  3. <MudSnackbarProvider/>

Implement MudBlazor’s Breadcrumbs in Component

Write this following code in our Index.razor component.
  1. @page "/"
  2. <MudBreadcrumbs Items = "_items">
  3. </MudBreadcrumbs>
  4. @code {
  5. privateList < BreadcrumbItem > _items = newList < BreadcrumbItem > {
  6. newBreadcrumbItem("Home", href: "/"),
  7. newBreadcrumbItem("Fetch Data", href: "/fetchdata"),
  8. newBreadcrumbItem("Counter", href: "/counter")
  9. };
  10. }
Fig.1 Demo for the above code

Breadcrumbs Properties

Example - Separator
  1. @page "/"
  2. <MudBreadcrumbs Items = "_items" Separator = ">" >
  3. </MudBreadcrumbs>
  4. @code {
  5. privateList < BreadcrumbItem > _items = newList < BreadcrumbItem > {
  6. newBreadcrumbItem("Home", href: "#"),
  7. newBreadcrumbItem("Fetch Data", href: "#"),
  8. newBreadcrumbItem("Counter", href: null, disabled: true)
  9. };
  10. }
Fig.2 Separator
SeparatorTemplate
  1. @page "/"
  2. <MudBreadcrumbs Items = "_items">
  3. <SeparatorTemplate>
  4. <MudIcon Icon = "@Icons.Material.Filled.ArrowForward"Size = "Size.Small" />
  5. </SeparatorTemplate>
  6. </MudBreadcrumbs>
  7. @code {
  8. privateList < BreadcrumbItem > _items = newList < BreadcrumbItem > {
  9. newBreadcrumbItem("Home", href: "#"),
  10. newBreadcrumbItem("Fetch Data", href: "#"),
  11. newBreadcrumbItem("Counter", href: null, disabled: true)
  12. };
  13. }
Fig.3 SeparatorTemplate
Item Icon
  1. @page "/"
  2. <MudBreadcrumbs Items = "_items" >
  3. </MudBreadcrumbs>
  4. @code {
  5. privateList < BreadcrumbItem > _items = newList < BreadcrumbItem > {
  6. newBreadcrumbItem("Home", href: "#", icon: Icons.Material.Filled.Home),
  7. newBreadcrumbItem("Videos", href: "#", icon: Icons.Material.Filled.VideoLibrary),
  8. newBreadcrumbItem("Create", href: null, disabled: true, icon: Icons.Material.Filled.Create)
  9. };
  10. }
Fig.4 Item Icons
Item Template
  1. @page "/"
  2. <MudBreadcrumbs Items="_items">
  3. <ItemTemplate Context="item">
  4. <MudLink Href="@item.Href">@item.Text.ToUpper()</MudLink>
  5. </ItemTemplate>
  6. </MudBreadcrumbs>
  7. @code {
  8. privateList<BreadcrumbItem> _items = newList<BreadcrumbItem>
  9. {
  10. newBreadcrumbItem("Home", href: "#"),
  11. newBreadcrumbItem("Link 1", href: "#"),
  12. newBreadcrumbItem("Link 2", href:"#")
  13. };
  14. }
Fig.5 Item Template
MaxItems
  1. @page "/" < MudBreadcrumbs Items = "_items"
  2. MaxItems = "5" > < /MudBreadcrumbs>
  3. @code {
  4. privateList < BreadcrumbItem > _items = newList < BreadcrumbItem > {
  5. newBreadcrumbItem("Home", href: "#"),
  6. newBreadcrumbItem("Link 1", href: "#"),
  7. newBreadcrumbItem("Link 2", href: "#"),
  8. newBreadcrumbItem("Link 3", href: "#"),
  9. newBreadcrumbItem("Link 4", href: null, disabled: true)
  10. };
  11. }
Fig.5 MaxItem (Collapse)
Note
When we set the MaxItemsthe parameter in order to automatically collapse the breadcrumbs when it exceeds the number of items.

Conclusion

In this article, we had a look at How to implement Breadcrumbs in our WebAssembly project. Hope this was useful, and let's discuss other features in upcoming articles. Please share your feedback in the comment section.
Other Article of Mine on Blazor,