How to Use AppBar in Blazor?

When it comes to navigating Blazor apps, Telerik has you covered with an extensive variety of Blazor navigation components, such as the Breadcrumb, Drawer, Menu, PanelBar and the TreeView.

The latest addition to this proud group of navigation components is the AppBar. It has the unique feature to control its position on the screen, depending on the component configuration.

Position

Usually, you will want the AppBar to reside at one of following places on the page, defined by the component's Position parameter

• At the Top of the browser viewport, no matter what the current page scroll is offset.
• At the Bottom of the browser viewport.
• Where the component is declared. The corresponding Position value is None if you pardon the pun.
• A combination of the first and third options above. We will discuss this in the coming paragraph.

Let's Get Sticky

position:sticky is one of those automagical CSS behaviors that used to keep front-end developers bosy in the past and force them to implement not-so-well-performing JavaScript algorithms in scroll event handlers. The goal was to make an element move with the rest of the page content during scrolling but stop moving ("stick") as soon as the element reaches the top of the browser viewport.

Thanks to modern CSS standards, sticky position is now easily achieved, so that front-end developers can fiddle with something else, for example moving cars or rotating mobile phones on pages that scroll forever. Telerik UI for Blazor supports sticky behavior through the AppBar PositionMode parameter.

A less playful alternative to the Sticky PositionMode is the Fixed mode. In that case the AppBar will display at the defined location (Position) and stay there, while not being interested in the other page content at all.

More creative scenarios may require a fixed or sticky AppBar inside a container. That's surely possible and we'll get to that in a bit.

Festival of (Theme) Color

The AppBar comes with a rich set of predefined combinations for text color and background color. You can easily apply the desired mood on the component, unless a good old corporate color scheme is summoning you together with the AppBar Class parameter.

Experiment with this AppBar example on the Blazor REPL playground or even better, download Telerik UI for Blazor and explore all the goodies!