Getting Started with the Breadcrumb
This guide demonstrates how to get up and running with the Kendo UI for jQuery Breadcrumb.
After the completion of this guide, you will achieve the following end result:
<nav id="breadcrumb"></nav>
<script>
$("#breadcrumb").kendoBreadcrumb({
size: "small",
rootIcon: "home",
items: [
{
type: "rootitem",
href: "https://demos.telerik.com/kendo-ui/",
text: "All Components",
showText: true,
showIcon: true
},
{
type: "item",
href: "/breadcrumb",
text: "Breadcrumb",
showText: true
},
{
type: "item",
href: "/index",
text: "Getting Started",
showText: true
}
]
});
</script>
1. Create a Nav Element
First, create a <nav> element on the page that will be used to initialize the component.
<nav id="breadcrumb"></nav>
2. Initialize the Breadcrumb
In this step, you will initialize the Breadcrumb from the <nav> element. When you initialize the component, all settings of the Breadcrumb will be provided in the script statement. You have to describe its layout, configuration, and event handlers in JavaScript.
<nav id="breadcrumb"></nav>
<script>
$("#breadcrumb").kendoBreadcrumb();
</script>
3. Specify the Items
Here, you will specify a list of items to be rendered in Breadcrumb.
<nav id="breadcrumb"></nav>
<script>
$("#breadcrumb").kendoBreadcrumb({
items: [
{
type: "rootitem",
href: "https://demos.telerik.com/kendo-ui/",
text: "All Components",
showText: true,
showIcon: true
},
{
type: "item",
href: "/breadcrumb",
text: "Breadcrumb",
showText: true
},
{
type: "item",
href: "/index",
text: "Getting Started",
showText: true
}
]
});
</script>
4. Customize the Breadcrumb
In this step, you will apply Breadcrumb configuration settings, such as size and rootIcon.
<nav id="breadcrumb"></nav>
<script>
$("#breadcrumb").kendoBreadcrumb({
size: "small", // Apply a 'small' size of the component
rootIcon: "home", // Specify a 'home' icon to the first item of Breadcrumb path
items: [
{
type: "rootitem",
href: "https://demos.telerik.com/kendo-ui/",
text: "All Components",
showText: true,
showIcon: true
},
{
type: "item",
href: "/breadcrumb",
text: "Breadcrumb",
showText: true
},
{
type: "item",
href: "/index",
text: "Getting Started",
showText: true
}
]
});
</script>