Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Breadcrumbs

A useful way to show the user's location.

See Breadcrumbs API for parameter documentation.

Basic Breadcrumbs

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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)
    };
}

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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)
    };
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙