# 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:

* [BottomNavigation Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/layout/bottomnavigation/appearance#configurator-demo)
* [BottomNavigation Theme Color](https://www.telerik.com/kendo-vue-ui-develop/components/layout/bottomnavigation/appearance#theme-color)
* [BottomNavigation Fill Mode](https://www.telerik.com/kendo-vue-ui-develop/components/layout/bottomnavigation/appearance#fill)

## Configurator demo

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/bottomnavigation/appearance/source.txt)

## Theme Color

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

The available [`themeColor`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#themeColor) values are:

* `base` — Applies the base coloring.
* `primary` — 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.
* `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.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/bottomnavigation/theme-color/source.txt)

## Fill

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

The available [`fillMode`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#fillmode) values are:

* `flat` — Sets the theme color as the text color. The background will be white.
* `solid` — Sets the theme color as a background color.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/bottomnavigation/fill/source.txt)

## Suggested Links

* [API Reference of the BottomNavigationProps](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops)
* [API Reference of the BottomNavigationItemProps](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationitemprops)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)