AppBar

Mobile-style top application bar with a centered title, optional back button, and a right-side action slot.

Basic

A simple AppBar with only a title.

My App

Page content

Provide OnBack to render a back chevron on the left. BackLabel sets the accessible aria-label.

Page content

Use the RightContent fragment to place icon buttons, avatars, or any action in the right zone.

Page content

Transparent=true removes the background and bottom border, intended for placement over hero images or full-bleed content.

Hero content beneath the bar

TitleContent replaces the plain text title with any render fragment — useful for branding logos or multi-line headings.

Jimmy Petrus Online

Chat content

AppBar parameters.

Prop	Type	Default	Description
Title	string?	—	Title text centred in the bar. Ignored when TitleContent is provided.
TitleContent	RenderFragment?	—	Custom title fragment; takes precedence over Title.
OnBack	EventCallback	—	Callback for the back button. Button only renders when this is provided.
BackLabel	string	"Go back"	Accessible aria-label for the back button.
RightContent	RenderFragment?	—	Right-side slot for icon buttons, avatar, share icon, etc.
Transparent	bool	false	Removes background and bottom border — use over hero images.
ShowBorder	bool	true	Shows the bottom border. Automatically hidden when Transparent is true.
Class	string?	—	Additional CSS classes on the header element.