How to Update Breadcrumb Items from a Page

Updated on Oct 19, 2026

Environment

Product	Breadcrumb for Blazor
Version	15.0.1 and above

Description

Update Breadcrumb items from a page when the Breadcrumb is rendered in MainLayout.razor and the page loads data asynchronously.

This KB article answers the following questions:

• How to update Breadcrumb items after a page loads data.
• How to share Breadcrumb state between a page and MainLayout.razor.
• How to display a data-bound value, such as a product name, in a layout Breadcrumb.

Solution

Store the items in a scoped state service that both the layout and the page use, rather than keeping separate Items lists in each component.

1. Register the state service in Program.cs:

Example

View Source

builder.Services.AddScoped<BreadcrumbState>();

1. Create the state service and the model for the Breadcrumb items:

Example

View Source

using System;
using System.Collections.Generic;
using System.Linq;

public sealed class BreadcrumbState
{
    public IReadOnlyList<BreadcrumbItemModel> Items { get; private set; } = Array.Empty<BreadcrumbItemModel>();

    public event Action? Changed;

    public void SetItems(IEnumerable<BreadcrumbItemModel> items)
    {
        Items = items.ToList();
        Changed?.Invoke();
    }
}

public class BreadcrumbItemModel
{
    public string Text { get; set; } = string.Empty;
    public string Url { get; set; } = string.Empty;
}

1. Inject the service into MainLayout.razor, bind the Breadcrumb to its Items property, and re-render the layout when the state changes:

RAZOR

@inherits LayoutComponentBase
@implements IDisposable
@inject BreadcrumbState BreadcrumbState

<TelerikBreadcrumb Data="@BreadcrumbState.Items" />

@Body

@code {
    protected override void OnInitialized()
    {
        BreadcrumbState.Changed += OnBreadcrumbStateChanged;
    }

    private void OnBreadcrumbStateChanged()
    {
        _ = InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        BreadcrumbState.Changed -= OnBreadcrumbStateChanged;
    }
}

1. Inject the same service into the page and update it after the page data loads. ProductService represents the existing application service that loads the page data:

RAZOR

@page "/products/{ProductId:int}"
@inject BreadcrumbState BreadcrumbState
@inject ProductService ProductService

@code {
    [Parameter]
    public int ProductId { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var product = await ProductService.GetAsync(ProductId);

        BreadcrumbState.SetItems(new[]
        {
            new BreadcrumbItemModel { Text = "Home", Url = "/" },
            new BreadcrumbItemModel { Text = "Products", Url = "/products" },
            new BreadcrumbItemModel { Text = product.Name, Url = $"/products/{product.Id}" }
        });
    }
}

The page updates the same state object that the layout uses, so the layout Breadcrumb re-renders with the loaded product name. Use OnInitializedAsync when the data load is asynchronous. The page does not need to subscribe to LocationChanged for this scenario.

See Also

• Breadcrumb Navigation
• Breadcrumb Overview