themeColor String (default: "primary")

Specifies the theme color of the component. Valid options are:

  • inherit: no coloring will be applied to the badge. Useful when the badge needs to blend-in with the surrounding elements.
  • default: apply coloring based on surface theme color.
  • primary: apply coloring based on primary theme color.
  • secondary: apply coloring based on secondary theme color.
  • tertiary: apply coloring based on tertiary theme color.
  • info: apply coloring based on info theme color.
  • success: apply coloring based on success theme color.
  • warning:apply coloring based on warning theme color.
  • error: apply coloring based on error theme color.
  • dark: apply coloring based on dark theme color.
  • light: always coloring based on light theme color.
  • inverse: depending on the luminance of the theme, light or dark, inverted will be dark or light.

Example

<nav id="bottomnav"></nav>

<script>
    $("#bottomnav").kendoBottomNavigation({
        themeColor: "dark",
        items: [
            { text: "Home", icon: "home" },
            { text: "Info", icon: "info" },
            { text: "Contact", icon: "email" }
        ]
    });
</script>
In this article
Not finding the help you need? Improve this article