Getting Started with the BottomNavigation
This guide demonstrates how to get up and running with the Kendo UI for jQuery BottomNavigation.
After the completion of this guide, you will achieve the following end result:
<nav id="bottomnavigation"></nav>
<script>
$("#bottomnavigation").kendoBottomNavigation({
items: [
{ text: "Home", icon: "home" },
{ text: "Info", icon: "info-circle" },
{ text: "Contact", icon: "envelope" }
]
});
</script>
1. Create a Nav Element
First, create a <nav> element on the page that will be used to initialize the component. The content of the <nav> will be the content of the BottomNavigation.
<nav id="bottomnavigation"></nav>
2. Initialize the BottomNavigation
In this step, you will initialize the BottomNavigation from the <nav> element.
<nav id="bottomnavigation"></nav>
<script>
$("#bottomnavigation").kendoBottomNavigation();
</script>
3. Specify the Items
Here, you will specify the items of the BottomNavigation.
<nav id="bottomnavigation"></nav>
<script>
$("#bottomnavigation").kendoBottomNavigation({
items: [
{ text: "Home", icon: "home" },
{ text: "Info", icon: "info-circle" },
{ text: "Contact", icon: "envelope" }
]
});
</script>