New to Telerik UI for ASP.NET Core? Download free 30-day trial

Appearance

The Telerik BottomNavigation for ASP.NET Core allows you to alter the appearance of the component by setting its ItemFlow, ThemeColor, Border, Shadow and Fill options.

The example below demonstrates how to modify the appearance by using the above settings:

    @(Html.Kendo().BottomNavigation()
        .Name("bottomNavigation")
        .PositionMode(BottomNavigationPositionMode.Absolute)
        .ItemFlow( BottomNavigationItemFlow.Horizontal)
        .Fill( BottomNavigationFill.Solid)
        .Border(false)
        .Shadow(true)
        .ThemeColor( BottomNavigationThemeColor.Dark)
        .HtmlAttributes(new { style = "bottom:0;" })
        .Items(i =>
        {
            i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
            i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
            i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
        })
    )
    @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"
            item-flow="BottomNavigationItemFlow.Horizontal"
            theme-color="BottomNavigationThemeColor.Secondary"
            fill="BottomNavigationFill.Solid"
            border="false"
            shadow="true">
        <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>

See Also

In this article