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

Item Template

If you use the ItemTemplate parameter, MudBlazor doesn't wrap the content in anchors.

<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: null, disabled: true)
    };
}

Collapsed

You can set the MaxItems parameter in order to automatically collapse the breadcrumbs when it exceeds a number of items.

<MudBreadcrumbs Items="_items" MaxItems="4"></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)
    };
}

Breadcrumbs

API