items

Array

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home" },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.attributes

Object

Defines custom attributes of the item's element.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", attributes: { "data-val" : "custom data attribute" } },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.cssClass

String

Defines the class names of the item's element.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", cssClass: "my-css-class" },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.data

Object

Contextual data to be used for events within the component.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", data: { view: "home" } },
            { text: "Info", icon: "info-circle", data: { view: "info" } },
            { text: "Contact", icon: "envelope", data: { view: "info" } }
        ],
        select: function (ev) {
            alert(ev.data.view);
        }
    });
</script>

items.enabled

Boolean

Toggles the enabled state of the item.

Default: true

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", enabled: false },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.encoded

Boolean

If false, the text will be able to render HTML.

Default: true

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "<strong>Home</strong>", icon: "home", encoded: false },
            { text: "<strong>Info</strong>", icon: "info-circle", encoded: true },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.icon

String

Defines the name for an existing icon in a Kendo UI theme.

See web font icons help article for more details on Kendo UI icons.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home" },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.iconClass

String

Defines the class name added to the icon element.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", iconClass: "my-icon-class" },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.selected

Boolean

Toggles the selected state of the item.

Default: false

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", selected: true },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.template

String|Function

Sets a custom template for the item (overrides the template option).

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", template: "<span>#:text#</span>" },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>

items.text

String

The text of the item. It is optional - if not set, no text will be rendered.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { icon: "home" },
            { icon: "info-circle" },
            { icon: "envelope" }
        ]
    });
</script>

items.url

String

The URL (href) to which the item will navigate to.

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", url: "http://www.telerik.com" },
            { text: "Info", icon: "info-circle" },
            { text: "Contact", icon: "envelope" }
        ]
    });
</script>