New to Kendo UI for Angular? Start a free 30-day trial


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 property.

The BottomNavigation provides the following options:

  • fixed(Default) - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
  • sticky - Positions the BottomNavigation at the end of the scrollable container.

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 hidden behind the BottomNavigation. In this case, either apply bottom padding to the page content or set a sticky position mode.

View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?