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.
• sticky—Positions 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.

Suggested Links

• API Reference of the BottomNavigation Component