# Custom Rendering

The BottomNavigation enables you to override its default rendering by using the following options:

* [Item property of the BottomNavigation items](https://www.telerik.com/kendo-vue-ui-develop/components/layout/bottomnavigation/custom-rendering#item-property)
* [ItemRender property of the BottomNavigation component](https://www.telerik.com/kendo-vue-ui-develop/components/layout/bottomnavigation/custom-rendering#item-render-property)

## Item Property

To customize the appearance of the BottomNavigation items, you can use the [`item`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#item) property of its items.

The following example demonstrates how to add additional components in the BottomNavigation items such as `FloatingActionButton` and `Badge`:

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

## Item Render Property

To override the default rendering of all ButtonNavigation items, you can use the [`itemRender`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#itemRender) property of the component.

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