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
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
The following example demonstrates how to set the
positionMode property of the BottomNavigation.