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

Select

events

Fires when the user selects an item in BottomNavigation.

select

Event Data

e.originalEvent `Object`

The original DOM event.

e.sender `kendo.ui.BottomNavigation`

The BottomNavigation instance that triggered the event.

e.data `Object`

The contextual data passed via items.data option.

e.item `jQuery`

The item selected.

e.preventDefault `Function`

If invoked prevents the item selection.

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

<script>
    $("#bottomnav").kendoBottomNavigation({
        items: [
            { text: "Home", icon: "home", url: "http://www.telerik.com", data: { view: "home" } },
            { text: "Info", icon: "info-circle", data: { view: "info" } },
            { text: "Contact", icon: "envelope", data: { view: "email" } }
        ],
        select: function (ev) {
            var data = ev.data;
            var item = ev.item;

            if (item.is("a")) {
                // prevent navigation from links.
                ev.originalEvent.preventDefault();
            }

            if (data.view === "email") {
                // prevent selection
                ev.preventDefault();
            }

            alert(data.view);
        }
    })
</script>