First, the component need to be placed somewhere inside razor page. The component requires using Bergsoft.Blazor namespace.

@using Bergsoft.Blazor

<Breadcrumbs />

Immediately a type parameter is required to be provided. In our case we will use class named Path. For play-test purposes, a class can be placed inside the code section of same page.

<Breadcrumbs T="Location" />

@code {
    class Location(string title)
    {
        public string Title { get; set; } = title;       
        public string ImageSrc => $"{Title.ToLower()}.png";
    }
}

Now it's required to provide items to the component. In our example user will be able to select continent, country inside the continent and then city inside the country.

<Breadcrumbs T="Location" Items="_locations" />

@code {
    private List<Location> _locations = [
        new Location("World"),
        new Location("Europe"),
        new Location("Spain"),
        new Location("Madrid")];

    class Location(string title)
    {
        public string Title { get; set; } = title;       
        public string ImageSrc => $"{Title.ToLower()}.png";
    }
}

Path from the World and all to Madrid will be now rendered.

Appearance can be further customised by using ItemTemplate parameter. This template (of RenderFragment type) can give the opportunity to chose which field of an item will be rendered.

Within the ItemTemplate we can access always handy context object, but this of TreeStateContext type. This object can provide us properties such as Level and Value itself. In this example Value property is of Location type.

<Breadcrumbs T="Location" Items="_locations">
    <ItemTemplate>
        @if (context.Level == 2)
        {
            <img src="images/@context.Value.ImageSrc" />
        }
        <span>@context.Value.Title</span>
    </ItemTemplate>
</Breadcrumbs>

In this example an additional image beside the text is drawn (for example a flag) for all countries (Level equal to 2).

Selecting children

By clicking on a separator button, user can select direct children of item on the left side.

In order to display couple children from memory or many from a remote service, one more parameter need to be set up.

<Breadcrumbs T="Location" Items="_locations" OnGetChildren="HandleGetChildren">

...

@code {
    private List<Location> HandleGetChildren(TreeStateContext<Location> context)
    {
        if (context.Level == 0)
        {
            return [new Location("America"),
                new Location("Africa"),
                new Location("Asia"),
                new Location("Australia"),
                new Location("Europe")];
        }
        return [];
    }
}