ASP.NET MVC BottomNavigation Overview

Telerik UI for ASP.NET MVC Ninja image

The BottomNavigation is part of Telerik UI for ASP.NET MVC, 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 BottomNavigation HtmlHelper for ASP.NET MVC is a server-side wrapper 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")
    )

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("envelop").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>

Functionality and Features

  • Items—The items configuration allows you to set various attributes like icons and text.
  • Appearance—The built-in appearance configuration allows you to customize the component.
  • Templates—The templates give you control over the rendering of the BottomNavigation items.
  • Accessibility—The BottomNavigation supports accessibility standards like WAI-ARIA, Section 508, WCAG 2.2, and provides keyboard support.
  • Events—Use the Select() event to control the functions of the component.

Next Steps

See Also

In this article