Skip to content

Extra

TopAppBar

A FormaUI top app bar — "Material 3 with better defaults"; one entry point covers all four Material 3 top app bar sizes via variant.

dev.formaui.components.topappbar

SmallCenterAlignedMediumLarge

Preview

This toggle is site chrome only — the preview has its own light/dark switch inside.

Live preview

Live preview — ~37 MB development build

Usage

FormaTopAppBar(
    title = "Inbox",
    variant = FormaTopAppBarVariant.Small,
    navigationIcon = {
        FormaIconButton(onClick = { /* back */ }) {
            Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
        }
    },
)

FormaTopAppBar

One entry point for all four M3 top app bar sizes via variant; pair Medium/Large with a scrollBehavior for the standard collapsing-header behavior (call sites also need @OptIn(ExperimentalMaterial3Api::class) because TopAppBarScrollBehavior is still experimental in M3).

titlerequiredTypeStringDefaultrequiredDescriptionthe bar's title text.
modifierTypeModifierDefaultModifierDescriptionthe Modifier applied to the bar.
variantTypeFormaTopAppBarVariantDefaultFormaTopAppBarVariant.SmallDescriptionthe bar's layout (defaults to FormaTopAppBarVariant.Small).
navigationIconType@Composable (() -> Unit)?DefaultnullDescriptionoptional slot at the start of the bar (typically an IconButton, e.g. FormaIconButton, for a back or menu action).
actionsType@Composable RowScope.() -> UnitDefault{}Descriptionthe actions displayed at the end of the bar, laid out in a RowScope (typically IconButtons).
scrollBehaviorTypeTopAppBarScrollBehavior?DefaultnullDescriptionan optional TopAppBarScrollBehavior that ties this bar's height/color changes to a scrolling content's NestedScrollConnection.
colorsTypeTopAppBarColors?DefaultnullDescriptionthe container/content colors. When null, the Material 3 default colors for the chosen variant are used.

Supporting API

FormaTopAppBarVariantenum
The layout of a FormaTopAppBar, mirroring Material 3's four top app bar sizes: Small, CenterAligned, Medium, Large.

Accessibility

title is a real Text and is announced as the bar's label; navigationIcon and actions are icon slots, so supply a contentDescription on each (e.g. "Back", "More options"). Touch targets come from the Material 3 icon buttons placed in those slots.