New to KendoReact? Start a free 30-day trial

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?