Appearance

The Kendo UI BottomNavigation allows you to alter the appearance of the widget by setting its itemFlow, themeColor, border, shadow and fill options.

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

    <nav id="bottomnavigation"></nav>

    <script>
        $(document).ready(function () {
            $("#bottomnavigation").kendoBottomNavigation({
                items: [
                    { data: { view: "home" }, icon: "home", text: "Home", selected: true },
                    { data: { view: "calendar" }, icon: "calendar", text: "Calendar" },
                    { data: { view: "profile" }, icon: "user", text: "Profile" }
                ],
                positionMode: "absolute",
                itemFlow:"vertical",
                themeColor: "secondary",
                fill: "solid",
                border: false,
                shadow: true
            });
        });
    </script>

For a complete example, please review the Appearance BottomNavigation Demo

See Also

• JavaScript API Reference of the BottomNavigation