Overflowing
When the width of the Breadcrumb is not enough to display the entire path, the component will show only the items that fit the available space. The rest will be hidden. If you click one of the visible items, the value of the component will change and reveal the previously hidden item.
The below example demonstrates the overflowing feature.
<nav id="breadcrumb" style="width:300px"></nav>
<script>
$("#breadcrumb").kendoBreadcrumb({
items: [
{ type: "rootitem", href: "mysite.com", text: "Telerik UI", icon: "globe", showIcon: true, showText: true },
{ type: "item", href: "/navigation", text: "Navigation", icon: "cloud", showText: true, showIcon: false },
{ type: "item", href: "/breadcrumb1", text: "Folder1", showText: true },
{ type: "item", href: "/breadcrumb2", text: "Folder2", showText: true },
{ type: "item", href: "/breadcrumb3", text: "Folder3", showText: true },
{ type: "item", href: "/breadcrumb4", text: "Folder4", showText: true },
{ type: "item", href: "/breadcrumb5", text: "Folder5", showText: true },
{ type: "item", href: "/breadcrumb6", text: "Folder6", showText: true },
{ type: "item", href: "/breadcrumb7", text: "Folder7", showText: true },
{ type: "item", href: "/breadcrumb8", text: "Folder8", showText: true },
{ type: "item", href: "/breadcrumb9", text: "Folder9", showText: true },
{ type: "item", href: "/breadcrumb10", text: "Folder10", showText: true},
],
editable:true
});
</script>