BottomNavigation Overview

Telerik UI for ASP.NET Core Ninja image

The BottomNavigation is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI BottomNavigation TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI BottomNavigation widget.

The BottomNavigation allows movement between primary destinations in an application. The main purpose of the component is to offer a navigation element whose options are represented by an icon and text.

Initializing the BottomNavigation

The following example demonstrates how to define the BottomNavigation.

    @(Html.Kendo().BottomNavigation()
        .Name("bottomnavigation")
    )
       <kendo-bottomnavigation name="bottomNavigation">
       </kendo-bottomnavigation>

Basic Configuration

The following example demonstrates the basic configuration for the BottomNavigation.

    @(Html.Kendo().BottomNavigation()
            .Name("bottomNavigation")
            .PositionMode(BottomNavigationPositionMode.Absolute)
            .HtmlAttributes( new { style="bottom:0;"})
            .Items(i=> {
                i.Add().Text("Inbox").Data(new { view = "inbox" }).Icon("email").Selected(true);
                i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
                i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
            })
    )

    <script>
    $(function() {
        // The Name() of the BottomNavigation is used to get its client-side instance.
        var bottomNavigation = $("#bottomNavigation").data("kendoBottomNavigation");
    });
    </script>
    @addTagHelper *, Kendo.Mvc
    @{
        var home = new { view= "home"};
        var calendar = new { view = "calendar" };
        var profile = new { view = "profile" };
    }  
    <kendo-bottomnavigation name="bottomNavigation" position-mode="BottomNavigationPositionMode.Absolute">
            <bottomnavigation-items>
                <bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
                <bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar"></bottomnavigation-item>
                <bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
            </bottomnavigation-items>
    </kendo-bottomnavigation>

Functionality and Features

  • Items - the configuration allows you to set various attributes like icons and text.
  • Appearance - the configuration allows you to modify the appearance of the component.
  • Templates - the configuration allows you to customize how the items will be rendered.
  • Accessibility - the BottomNavigation supports various accessibility standards.

See Also

In this article