Post
Ask Question

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 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Kendo Breadcrumb</title>  
  6.   
  7.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />  
  8.   
  9.     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>  
  10.     <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>  
  11. </head>  
  12. <body>  
  13.   
  14.     <nav id="navbreadcrumb"></nav>  
  15.   
  16.     <script>  
  17.         $("#navbreadcrumb").kendoBreadcrumb({  
  18.             items: [  
  19.                 {  
  20.                     type: "rootitem",  
  21.                     href: "/Home",  
  22.                     text: "Home",  
  23.                     showText: true,  
  24.                     icon: "home",  
  25.                     showIcon: true  
  26.   
  27.                 },  
  28.                 {  
  29.                     type: "item",  
  30.                     href: "/_Settings",  
  31.                     text: "Settings",  
  32.                     showText: true,  
  33.   
  34.                 },  
  35.                 {  
  36.                     type: "item",  
  37.                     href: "/_General",  
  38.                     text: "General",  
  39.                     showText: true  
  40.                 }  
  41.             ]  
  42.         });  
  43.     </script>  
  44. </body>  
  45. </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. 
  1. $("#breadcrumb").kendoBreadcrumb({  
  2.            items: [  
  3.                {  
  4.                    type: "rootitem",  
  5.                    href: "/Home",  
  6.                    text: "Home",  
  7.                    showText: true,  
  8.                 icon: "home",  
  9.                    showIcon: true  
  10.   
  11.                },  
  12.                {  
  13.                    type: "item",  
  14.                    href: "/_Settings",  
  15.                    text: "Settings",  
  16.                    showText: true,  
  17.                 icon: "gear",  
  18.                    showIcon: true  
  19.   
  20.                },  
  21.                {  
  22.                    type: "item",  
  23.                    href: "/_General",  
  24.                    text: "General",  
  25.                    showText: true  
  26.                }  
  27.            ]  
  28.        });   
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.