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

Items

Updated on Sep 8, 2026

The items configuration allows you to set specific attributes of the BottomNavigation items. You can set their text (optionally) and the icon. The configuration also allows you to add classes for the different items that are rendered when initializing the component. You can also set the selected and enabled state for the items.

Note: When the items.url configuration is set, the items will be rendered as <a> tags. Otherwise, they will be rendered as <span> tags.

The following example demonstrates the possible options for the items configuration of the BottomNavigation component:

    <nav id="bottomNavigation"></nav>

    <script>
        $(document).ready(function () {
            var itemTemplate = '<span class="k-bottom-nav-item-icon k-icon k-i-calendar-date"></span>';
            $("#bottomNavigation").kendoBottomNavigation({
                items: [
                    { data: { view: "home" }, url: "#home", icon: "home", enabled:false, cssClass: "custom-css-class", text: "<strong>Home</strong>", encoded:false },
                    { data: { view: "calendar" }, url: "#calendar", template: itemTemplate, cssClass: "custom-css-class", text: "<emp>Calendar</emp>", encoded:false },
                    { data: { view: "profile" }, url: "#profile", icon: "user", cssClass: "custom-css-class", text: "Profile", selected: true }
                ]
            });
        })
    </script>

Items

See Also