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. 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")

    };
}
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
@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)
    };
}
Fig.2 Separator
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)
    };
}
Fig.3 SeparatorTemplate
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)
    };
}
Fig.4 Item Icons
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:"#")
    };
}
Fig.5 Item Template
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)
    };
}
Fig.5 MaxItem (Collapse)

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.

Other Article of Mine on Blazor

One thought on “Breadcrumbs For Blazor using MudBlazor

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Website Built with WordPress.com.

Up ↑

%d bloggers like this: