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.


Basic Configuration

The following example demonstrates the basic configuration for the BottomNavigation.

        .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");

        $(function() {
            // The Name() of the BottomNavigation is used to get its client-side instance.
            var bottomNavigation = $("#bottomNavigation").data("kendoBottomNavigation");

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