New to Kendo UI for jQuery? Download free 30-day trial

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>

See Also

In this article