MudBlazor - Blazor Component Library

Basic Breadcrumbs

<MudBreadcrumbs Items="_items"></MudBreadcrumbs>

@code {
    private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
    {
        new BreadcrumbItem("Home", href: "#"),
        new BreadcrumbItem("Link 1", href: "#"),
        new BreadcrumbItem("Link 2", href: null, disabled: true)
    };
}

Custom Separator

<MudBreadcrumbs Items="_items" Separator=">"></MudBreadcrumbs>

@code {
    private List<BreadcrumbItem> _items = new List<BreadcrumbItem>
    {
        new BreadcrumbItem("Home", href: "#"),
        new BreadcrumbItem("Link 1", href: "#"),
        new BreadcrumbItem("Link 2", href: null, disabled: true)
    };
}

Render Fragments

It is also possible to provide a RenderFragment as a template.

<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("Link 1", href: "#"),
        new BreadcrumbItem("Link 2", href: null, disabled: true)
    };
}

Item Icons

<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)
    };
}