• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial

Appearance

The BottomNavigation provides a predefined set of appearance options.

Apart from the default appearance of the BottomNavigation, the following styling options allow you to configure each individual aspect of the component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

Configurator demo

The following example demonstrates configuring different aspects of a BottomNavigation appearance using a configurator.

Example
View Source
Change Theme:

Theme Color

The BottomNavigation allows you to specify its theme color by choosing a value from a pre-defined list.

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?