Index.razor

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

@{
    if (Breadcrumbs.Count != 0)
    {
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                @for (int i = Breadcrumbs.Count - 1; i >= 0; i--)
                {
                    var currentNodeInfo = Breadcrumbs[i]; 
                <li class="breadcrumb-item active ">
                    @if (i != 0)
                    {
                        <a @onclick="@(() => SelectNode(currentNodeInfo.Text))" href="#">
                            @currentNodeInfo.Text
                        </a>
                    }
                    else
                    {
                        @currentNodeInfo.Text
                    }
                </li>
                }  
            </ol>
        </nav>
    }
}


<DxTreeView @ref="@TreeView" AllowSelectNodes="true"
            SelectionChanged="@SelectionChanged">
    <Nodes>
        <DxTreeViewNode Text="Metals">
            <Nodes>
                <DxTreeViewNode Text="Alkali metals" />
                <DxTreeViewNode Text="Alkaline earth metals" />
                <DxTreeViewNode Text="Inner transition elements">
                    <Nodes>
                        <DxTreeViewNode Text="Lanthanides" />
                        <DxTreeViewNode Text="Actinides" />
                    </Nodes>
                </DxTreeViewNode>
                <DxTreeViewNode Text="Transition elements" />
                <DxTreeViewNode Text="Other metals" />
            </Nodes>
        </DxTreeViewNode>
        <DxTreeViewNode Text="Metalloids" />
        <DxTreeViewNode Text="Nonmetals">
            <Nodes>
                <DxTreeViewNode Text="Halogens" />
                <DxTreeViewNode Text="Noble gases" />
                <DxTreeViewNode Text="Other nonmetals" />
            </Nodes>
        </DxTreeViewNode>
    </Nodes>
</DxTreeView>

@code  {

    DxTreeView TreeView;


    List<ITreeViewNodeInfo> Breadcrumbs;

    protected override Task OnInitializedAsync()
    {
        Breadcrumbs = new List<ITreeViewNodeInfo>();
        return base.OnInitializedAsync();
    }

    void SelectNode(string text) {
        TreeView.SelectNode((n) => n.Text == text);
    }

    protected void SelectionChanged(TreeViewNodeEventArgs e)
    {
        var currentNodeInfo = e.NodeInfo;
        Breadcrumbs.Clear();
        do
        {
            Breadcrumbs.Add(currentNodeInfo);
            currentNodeInfo = currentNodeInfo.Parent;
        }
        while (currentNodeInfo != null);
        InvokeAsync(StateHasChanged);
    }
}