# Positioning

The BottomNavigation enables you to specify different position modes in regard to the page content.

## Position Mode

To specify the type of positioning mode used for the BottomNavigation, use the [`positionMode`](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/bottomnavigationprops#positionMode) property.

The BottomNavigation provides the following options for setting the position mode:

* `fixed`(Default) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* `sticky` — Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position. It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.

> When the BottomNavigation has `positionMode={'fixed'}`, there is no reserved space for the component with regard to the other page content. This can cause parts of the page to be invisible behind the BottomNavigation. In this case, either apply bottom padding to the page content or set a `sticky` position mode.

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