Post
Ask Question

Breadcrumbs For Blazor Using MudBlazor

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
  • Create a Blazor WebAssembly Project and it in a location.
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

  • 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
  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,


Similar Articles