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.

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.

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.

Suggested Links

• API Reference of the BottomNavigationProps
• API Reference of the BottomNavigationItemProps
• Creating Custom Styles with ThemeBuilder