New to KendoReactLearn about KendoReact Free.

Appearance

The BottomNavigation component provides predefined settings for applying different theme colors and fill options. The fill option specifies if the theme color will be applied as a background color of the component, or as a text color.

Change Theme
Theme
Loading ...

Theme Color

The BottomNavigation allows you to specify predefined theme colors.

The available themeColor values are:

  • primary (Default) — Applies coloring based on the primary theme color.
  • secondary — Applies coloring based on the secondary theme color.
  • tertiary — Applies coloring based on the tertiary theme color.
  • info — Applies coloring based on the info theme color.
  • success — Applies coloring based on the success theme color.
  • warning — Applies coloring based on the warning theme color.
  • error — Applies coloring based on the error theme color.
  • dark — Applies coloring based on the dark theme color.
  • light — Applies coloring based on the light theme color.
  • inverse — Applies coloring based on the inverted theme color.

Any other regular color can be applied via custom CSS styling by targeting the BottomNavigation through its k-bottom-nav CSS class.

Change Theme
Theme
Loading ...

Fill

The BottomNavigation enables you to set styling options and create solid or flat layout by setting the fill property.

The available fill values are:

  • flat(Default) — Sets the theme color as the text color. The background will be white.
  • solid — Sets the theme color as a background color.
Change Theme
Theme
Loading ...
In this article
Theme ColorFillSuggested Links
Not finding the help you need?
Contact Support