# Templates

The Telerik BottomNavigation for ASP.NET Core provides full control over the rendering of the items by using Kendo UI templates.

Visit the [Demo page for the BottomNavigation](https://demos.telerik.com/aspnet-core/bottomnavigation/templates) to see it in action.

## Item Templates

The `Template` and `TemplateId` configurations manage the rendering of the BottomNavigation items.

```Razor HtmlHelper
    @(Html.Kendo().BottomNavigation()
        .Name("bottomNavigation")
        .PositionMode(BottomNavigationPositionMode.Absolute)
        .HtmlAttributes(new { style = "bottom:0;" })
        .TemplateId("bottomnav-template")
        .Items(i =>
        {
            i.Add().Text("Inbox").Data(new { view = "inbox" }).Icon("envelop").Selected(true).HtmlAttributes(new { id = "Inbox" });
            i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date").HtmlAttributes(new { id = "Calendar" });
            i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user").HtmlAttributes(new { id = "Profile" });
        })
    )

    <script id="bottomnav-template" type="text/x-kendo-template">
        <span class="k-icon k-i-#= icon #"> </span>
        <span> #= text # </span>
        <span id="badge-#=text#"></span>
    </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;" template-id="bottomnav-template">
            <bottomnavigation-items>
                <bottomnavigation-item
                    context-data="@inbox"
                    text="Inbox"
                    icon="envelop"
                    selected="true"
                    html-attributes='new Dictionary<string,object> { ["id"] = "Inbox" }'>
                </bottomnavigation-item>
                <bottomnavigation-item
                    context-data="@calendar"
                    text="Calendar"
                    icon="calendar-date"
                    html-attributes='new Dictionary<string,object> { ["id"] = "Calendar" }'>
                </bottomnavigation-item>
                <bottomnavigation-item
                    context-data="@profile"
                    text="Profile"
                    icon="user"
                    html-attributes='new Dictionary<string,object> { ["id"] = "Profile" }'>
                </bottomnavigation-item>
            </bottomnavigation-items>
    </kendo-bottomnavigation>

    <script id="bottomnav-template" type="text/x-kendo-template">
        <span class="k-icon k-i-#= icon #"> </span>
        <span> #= text # </span>
        <span id="badge-#=text#"></span>
    </script>
```

## See Also

* [Templates of the BottomNavigation HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/bottomnavigation/templates)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/bottomnavigation)