BottomNavigation TagHelper Overview

The Telerik UI BottomNavigation TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI BottomNavigation widget.

The BottomNavigation is a UI component that 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.

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 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Configuration

The following example demonstrates how to initialize the BottomNavigation using the TagHelper wrapper.

    @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.

Events

You can subscribe to the BottomNavigation events.

    @addTagHelper *, Kendo.Mvc
    @{
        var home = new { view= "home"};
        var calendar = new { view = "calendar" };
        var profile = new { view = "profile" };
    }   
    <kendo-bottomnavigation name="bottomNavigation" on-select="onSelect" 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>

    <script>
        function onSelect(e){
            //handle the BottomNavigation select event
        };

    </script>

See Also

In this article
Not finding the help you need? Improve this article