Description

When new data is loaded in the Breadcrumb, if at that moment some of the old items are hidden (because the browser window is too narrow), once the component visualizes the new data, the last item remains hidden.

Workaround
Add the following CSS to the page:

<style>
    .k-breadcrumb-last-item  {
        display: inline-block !important;
    }

    .k-breadcrumb-last-item .k-breadcrumb-link {
        display: inline-flex !important;
    }
</style>

Steps To Reproduce

1. Run this REPL example: https://blazorrepl.telerik.com/QTEqFvve37kGQ8C743
2. Ensure that the right pane is not too wide, in order for some of the Breadcrumb items to remain collapsed.
3. Click the button above the Breadcrumb. New data that contains 2 items is loaded in the component.

Actual Behavior

The Breadcrumb's last item ("Breadcrumb B 2") is hidden.

Another issue reproducible after loading more than 2 items in the Button's click handler is the Breadcrumb begins to flicker on pane (browser window) resize. The flickering is caused by items showing/hiding almost at the same time.

Expected Behavior

The behavior should remain as it is on initial load. The first and last items should always be visible.

No flickering should occur and there should be a smooth transition between hiding and showing an item.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

Hello,

Could it be possible to enable it links in the breadcrumbs to handle like normal links. If the user want's to open a new tab when pressing the Breadcrumb link?

At the moment the only way I know of it by making the itemTemplate and do the whole item part myself, which feels alittle overkill.

The Breadcrumb component should support hierarchical items to allow navigation analogical to file manager.

For refrerence, the following image could be used - screenshot from the Windows FileExplorer for navigation through file system.