Breadcrumb - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Breadcrumb Component

The Breadcrumb component visualizes the current page in a navigational hierarchy.

Parameters

Name Type Description
Items IEnumerable<ILink> A collection of the items to show in the Breadcrumb component.
ItemTemplate RenderFragment<ILink> The template to use to display each link with. If not specified, a default template is used.

Examples

The simplest way of using the Breadcrumb component.

@using BlazorBootstrap.Components
@using System.Collections.Generic

@code {
    List<BreadcrumbItem> items = new List<BreadcrumbItem>() {
        new BreadcrumbItem() { Text = "Home", Link = "/", Description = "The home page of the site." },
        new BreadcrumbItem() { Text = "Section #1", Link = "/section-1", Description = "The first section." },
        new BreadcrumbItem() { Text = "This page", IsActive=true, Description = "Your current page" }
    };
}

<Breadcrumb Items="this.items" />

Customizing the items displayed using the ItemTemplate template parameter. We're using the same items as in the description above. For details on how to work with templated components, refer to the Microsoft documentation.

<Breadcrumb Items="this.items">
    <ItemTemplate>
        @if (!string.IsNullOrEmpty(context.Link))
        {
            <Button Color="NamedColor.Light" Shadow="ShadowSize.Regular" Link="@context.Link" IsLink="true">@context.Text</Button>
        }
        else
        {
            <Span title="@context.Description">@context.Text</Span>
        }
    </ItemTemplate>
</Breadcrumb>
⚠️ **GitHub.com Fallback** ⚠️