Skip to content

AppBar

A top bar: title, optional subtitle and back button, leading/trailing slots.

Group: Layout · Kind: macro · in the lite catalog

example

Open in the playground

The same specimen painted by React, SwiftUI, Compose and gpui.

exponential-ui-app-bar on Web
exponential-ui-app-bar on iOS
exponential-ui-app-bar on Android
exponential-ui-app-bar on Desktop
Prop Type Required Bindable Description
title string yes yes The screen title.
subtitle string – yes A muted line under the title.
back boolean – – Shows a back button that fires back. Default false.
  • on.back: runs an action
  • leading: one component by id
  • trailing: one component by id

none

No basic catalog component maps here.

Box · Button · Text

Role: banner

banner (heading level 1 = the title). The title is heading level 1; the back button is labelled back ($a11y).

Keys Action
– Enter, Space on back

Recipe parts: AppBar/root AppBar/back AppBar/body AppBar/title AppBar/subtitle

Keyed by: :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Button · Text · Page · Box · Stack · Grid · Card · Separator