Kendo Breadcrumb Using jQuery

Introduction

Kendo Breadcrumb is one of the new components from Kendo UI with the R1 2020 release. It’s an intuitive UI component which allows the user to navigate within a web page. In this blog we are going to see how to get start with Kendo Breadcrumb using JQuery.

Get Start with Kendo Breadcrumb

Use <nav> to initialize the Breadcrumb.

KendoBreadcrumb.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo Breadcrumb</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
<nav id="navbreadcrumb"></nav>
<script>
$("#navbreadcrumb").kendoBreadcrumb({
items: [
{
type: "rootitem",
href: "/Home",
text: "Home",
showText: true,
icon: "home",
showIcon: true
},
{
type: "item",
href: "/_Settings",
text: "Settings",
showText: true,
},
{
type: "item",
href: "/_General",
text: "General",
showText: true
}
]
});
</script>
</body>
</html>

From the above code you can observe the Kendo Breadcrumb is initialized with the existing nav element. The items Json act as a datasource for the breadcrumb.

The type property in each item defines the hierarchy. The type “rootitem” act as root in the breadcrumb hierarchy.

Item Icons

We can add an icon for each item using icon and show icon property.

$("#breadcrumb").kendoBreadcrumb({
items: [
{
type: "rootitem",
href: "/Home",
text: "Home",
showText: true,
icon: "home",
showIcon: true
},
{
type: "item",
href: "/_Settings",
text: "Settings",
showText: true,
icon: "gear",
showIcon: true
},
{
type: "item",
href: "/_General",
text: "General",
showText: true
}
]
});

From the above code you can observe, the gear icon is defined for the setting item in the breadcrumb.

The showIcon property is used to show and hide the icon for each element by default it set to true.

Summary

We have seen how to initialize the Kendo breadcrumb and how to work with icons for the items in breadcrumb. Will see more about this control in my future blog.