BottomNavigation Overview

The Kendo UI BottomNavigation bar 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.

Visit the Demo page for the BottomNavigation to see it in action.

Kendo UI for jQuery Kendoka image

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

Initializing the BottomNavigation

To initialize the BottomNavigation, use the <nav> tag.

The following example demonstrates how to initialize the BottomNavigation from an existing <nav> element:

    <nav id="bottomnavigation"></nav>

    <script>
        $("#bottomnavigation").kendoBottomNavigation({
            items: [
                { text: "Home", icon: "home" },
                { text: "Info", icon: "info" },
                { text: "Contact", icon: "email" }
            ]
        });
    </script>

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
Not finding the help you need? Improve this article