Positioning

The AppBar allows you to set its Position and its Position mode.

Position

The Position option of the AppBar defines where the component has to be positioned on the page. The available position options are:

• None—No positioning CSS styles are applied.
• Top—Places the AppBar at the top of the page.
• Bottom—Places the AppBar at the bottom of the page.

Position Mode

The PositionMode option defines the position of the component relative to its parent container or viewport. The predefined position modes are:

• Static—Positions the AppBar according to the normal flow of the page.
• Sticky—Sticks the AppBar to a given position (top or bottom).
• Fixed—Positions the AppBar relative to the viewport.

To use the Sticky or Fixed position mode of the AppBar, the Position has to be set either to Top or Bottom.

See Also

• Positioning of the AppBar HtmlHelper for ASP.NET Core (Demo)
• Server-Side API