Templates
The BottomNavigation provides full control over the rendering of the items by using Kendo UI templates.
For a complete example, refer to the demo on customizing the BottomNavigation templates.
Item Templates
The template configuration manages the rendering of the BottomNavigation items.
<nav id="fab"></nav>
<script id="bottomnav-template" type="text/x-kendo-template">
<span class="k-icon k-i-#= icon #"> </span>
<span> #= text # </span>
<span id="badge-#=text#"></span>
</script>
<script>
$("#bottomNavigation").kendoBottomNavigation({
template: kendo.template($("#bottomnav-template").html()),
items: [
{ data: { view: "inbox" }, icon: "envelope", text: "Inbox", selected: true },
{ data: { view: "calendar" }, icon: "calendar", text: "Calendar" },
{ data: { view: "profile" }, icon: "user", text: "Profile" }
],
});
</script>