New to Telerik UI for ASP.NET MVC? Download free 30-day trial


The BottomNavigation exposes a Select() event that you can handle to customize the functions of the component. Using this event allows you to switch between the content of the BottomNavigation items.

For a complete example on basic BottomNavigation events, refer to the demo on using the events of the BottomNavigation.

    @using Kendo.Mvc.UI

    <div class="demo-app" style="position:relative">
            .HtmlAttributes( new { style="bottom:0;"})
            .Items(i=> {
                i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user").Selected(true);
                i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
            .Events(e => e.Select("onSelect"))
        <div id="profile" class="demo-view" style="display: initial;position:absolute;">
            <h3>Your Profile</h3>
        <div id="calendar" style="display: none;position:absolute" class="demo-view">
        function onSelect(e) {
            var id =
            $("#" + id).show();
        .demo-app {
            margin: auto;
            width: 234px;
            height: 400px;

Next Steps

See Also

In this article