Breadcrumb Items in Blazor Breadcrumb Component

10 Jan 20252 minutes to read

The Blazor Breadcrumb supports to generate items based on the current URL by default. You can set the BreadcrumbItem tag directive or Url property to generate the items.

BreadcrumbItem has the following properties for navigation and its customizations.

• Url - Sets the URL of the Breadcrumb item and it will navigate when clicked.

• IconCss - Sets CSS class string to include an icon for the Breadcrumb item.

• Text - Sets the text content of the Breadcrumb item.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb>
    <BreadcrumbItems>
        <BreadcrumbItem Text="Home" Url="https://blazor.syncfusion.com/demos/"></BreadcrumbItem>
        <BreadcrumbItem Text="Components" Url="https://blazor.syncfusion.com/demos/datagrid/overview"></BreadcrumbItem>
        <BreadcrumbItem Text="Navigations" Url="https://blazor.syncfusion.com/demos/breadcrumb/default-functionalities"></BreadcrumbItem>
        <BreadcrumbItem Text="Breadcrumb" Url="./breadcrumb/default-functionalities"></BreadcrumbItem>
    </BreadcrumbItems>
</SfBreadcrumb>

Items based on current URL

The Breadcrumb items can be generated based on the current URL of the page when the user does not specify the Breadcrumb items using the BreadcrumbItem tag directive. The following example shows the Breadcrumb items that are auto generated based on the current URL.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb></SfBreadcrumb>

NOTE

This output screenshot shows the Bind to Location sample.

Absolute URL

You can generate the Breadcrumb items by providing the Url property in the component as like the below example.

@using Syncfusion.Blazor.Navigations

<SfBreadcrumb Url="https://blazor.syncfusion.com/demos/breadcrumb/navigation">
</SfBreadcrumb>

Add or remove the Breadcrumb items

Using the Items property of Breadcrumb, we can dynamically add or remove the items of Breadcrumb.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfBreadcrumb class="e-custom" Items="@items">
</SfBreadcrumb>

<SfButton OnClick="AddBefore">Insert - before </SfButton>
<SfButton OnClick="AddAfter">Insert - After </SfButton>
<SfButton OnClick="Remove">Remove </SfButton>

@code{
    List<BreadcrumbItem> items = new List<BreadcrumbItem>
    {
        new BreadcrumbItem { IconCss = "e-icons e-home"},
        new BreadcrumbItem { Text = "Open", IconCss = "e-icons e-folder-open", Url = "https://blazor.syncfusion.com/demos/datagrid/overview"},
        new BreadcrumbItem { Text = "New", IconCss = "e-icons e-file-new"}
    };

    private void AddBefore()
    {
        var index = items.IndexOf(items.Where(item => item.Text == "Open").FirstOrDefault());
        items.Insert(index, new BreadcrumbItem {Text = "Save", IconCss = "e-icons e-save"});
    }

    private void AddAfter()
    {
        var index = items.IndexOf(items.Where(item => item.Text == "New").FirstOrDefault());
        items.Insert((index + 1), new BreadcrumbItem { Text = "Delete", IconCss = "e-icons e-delete" });
    }

    private void Remove()
    {
        items.RemoveAt(items.Count() - 1);
    }
}