App Bar

A compact top app bar for mobile and narrow layouts, with an optional back button, a title with secondary text, and trailing actions.

Default

Set Title and Description for the text column, ShowBack for a leading back button, and the Actions slot for trailing controls. The back button only raises OnBack — the component never navigates on your behalf. Sticky is on by default; it is turned off here so the bar stays inside the preview.

Back Navigation

Wire OnBack to your own navigation. Use BackLabel to give the back button a destination-specific accessible name instead of the localized "Go back" default.

Custom Leading and Title Content

LeadingContent replaces the back button entirely, and TitleContent replaces both Title and Description. Use TitleContent when the title needs to be a real heading element in the page hierarchy — the built-in title renders as a <div>.

Action with a Notification Count

Wrap an action in NotificationBadge to overlay a count on the corner of the button. The badge has pointer-events: none, so taps still reach the button underneath.