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

Position Mode

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

To specify the type of the positioning mode for the BottomNavigation, use the positionMode property.

The BottomNavigation supports the following settings:

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

When you render the BottomNavigation with positionMode="fixed", the space for the component in regard to the other page content is not reserved. As a result, parts of the content behind the BottomNavigation may become invisible. In this case, either define the bottom padding of the page content or set the sticky position mode.

The following example demonstrates how to set the positionMode property of the BottomNavigation.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?