# Content Types

The BottomNavigation component allows you to specify icons and text labels for the rendered buttons. You can also choose between horizontal or vertical item flow, which determines if the icon and the text are on the same line or one below the other.

## Item Content

To configure the content of the BottomNavigation items, use the following properties in its [`items`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#items) collection:

* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationitemprops#icon) — Sets an icon.
* [`text`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationitemprops#text) — Sets a text label.

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

## Item Flow

To configure the flow of the BottomNavigation items, use the [itemFlow](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#itemFlow) property.

The possible values are:

* `vertical`(Default) — Renders the text below the icon.
* `horizontal` — Renders the text and the icon on the same line.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/bottomnavigation/item-flow/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)