Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

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
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
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
Change Theme:

In this article

Not finding the help you need?