ASP.NET Core BottomNavigation Overview
The BottomNavigation is part of Telerik UI for ASP.NET Core, 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 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.
Initializing the BottomNavigation
The following example demonstrates how to define the BottomNavigation.
@(Html.Kendo().BottomNavigation()
.Name("bottomnavigation")
)
<kendo-bottomnavigation name="bottomnavigation">
</kendo-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>
@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—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
- Getting Started with the BottomNavigation
Basic Usage of the BottomNavigation HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the BottomNavigation TagHelper for ASP.NET Core (Demo)