# ASP.NET Core BottomNavigation Overview

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.

* [Demo page for the BottomNavigation HtmlHelper](https://demos.telerik.com/aspnet-core/bottomnavigation/index)

* [Demo page for the BottomNavigation TagHelper](https://demos.telerik.com/aspnet-core/bottomnavigation/tag-helper)

## Initializing the BottomNavigation

The following example demonstrates how to define the BottomNavigation.

```Razor HtmlHelper
    @(Html.Kendo().BottomNavigation()
        .Name("bottomnavigation")
    )
```

```Razor TagHelper
       <kendo-bottomnavigation name="bottomnavigation">
       </kendo-bottomnavigation>
```

## Basic Configuration

The following example demonstrates the basic configuration for the BottomNavigation.

```Razor HtmlHelper
    @(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>
```

```Razor TagHelper
    @addTagHelper *, Kendo.Mvc
    @{
        var inbox = new { view= "inbox" };
        var calendar = new { view = "calendar" };
        var profile = new { view = "profile" };
    }
    <kendo-bottomnavigation name="bottomNavigation" position-mode="BottomNavigationPositionMode.Absolute" style="bottom:0;">
            <bottomnavigation-items>
                <bottomnavigation-item context-data="@inbox" text="Inbox" icon="envelop" selected="true"></bottomnavigation-item>
                <bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
                <bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
            </bottomnavigation-items>
    </kendo-bottomnavigation>

    <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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/items)—The items configuration allows you to set various attributes like icons and text.
* [Appearance](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance)—The built-in appearance configuration allows you to customize the component.
* [Templates](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/templates)—The templates give you control over the rendering of the BottomNavigation items.
* [Accessibility](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/accessibility/overview)—The BottomNavigation supports accessibility standards like WAI-ARIA, Section 508, WCAG 2.2, and provides keyboard support.
* [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/events)—Use the `Select()` event to control the functions of the component.

## Next Steps

* [Getting Started with the BottomNavigation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/getting-started)

* [Basic Usage of the BottomNavigation HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/bottomnavigation/index)

* [Basic Usage of the BottomNavigation TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/bottomnavigation/tag-helper)

## See Also

* [Using the API of the BottomNavigation for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/bottomnavigation/api)
* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)