Configuring the Position

The AppBar enables you to specify its position in relation to the page content.

Position

To specify where the AppBar will be displayed, use its position property.

The AppBar provides the following options for setting its position:

• top(Default)—Positions the AppBar at the top of the content. Setting the position property to top requires you to add the Appbar component before the page content. position applies the top: 0 CSS style in the fixed mode and also adds a box-shadow to the bottom of the AppBar.
• bottom—Positions the AppBar at the bottom of the content. Setting the position property to bottom requires you to add the Appbar component after the page content. position applies the bottom: 0 CSS style in the fixed mode and also adds a box-shadow to the top of the AppBar.

The following example demonstrates how to set the position property of the AppBar.

Position Mode

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

The AppBar provides the following options for setting its position mode:

• static(Default)—The AppBar is positioned according to the normal flow of the page.
• sticky—Positions the AppBar based on the scroll position of the user. A sticky element toggles between the static and fixed CSS position property, depending on the scroll position.
• fixed—Positions the AppBar in relation to the viewport. It always stays in the same place even if the page is scrolled.

When you render the AppBar with positionMode="fixed", the dimension of the element doesn't impact the rest of the page. As a result, parts of the content behind the AppBar may become invisible. In this case, either define the padding of the page content or set the sticky position mode.

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

Suggested Links

• API Reference of the AppBar Component