Jetpack Compose CenterAlignedTopAppBar in Compose Multiplatform

<a href="https://m3.material.io/components/top-app-bar/overview" class="external" target="_blank">Material Design center-aligned small top app bar</a>.

Top app bars display information and actions at the top of a screen.

This small top app bar has a header title that is horizontally aligned to the center.

!Center-aligned top app bar image(https://developer.android.com/images/reference/androidx/compose/material3/center-aligned-top-app-bar.png)

This CenterAlignedTopAppBar has slots for a title, navigation icon, and actions.

A center aligned top app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

Overloads

CenterAlignedTopAppBar

@ExperimentalMaterial3Api
@Composable
fun CenterAlignedTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
)

Parameters

Name	Description
`title`	the title to be displayed in the top app bar
`modifier`	the Modifier to be applied to this top app bar
`navigationIcon`	the navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.
`actions`	the actions displayed at the end of the top app bar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.
`windowInsets`	a window insets that app bar will respect.
`colors`	TopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.centerAlignedTopAppBarColors.
`scrollBehavior`	a TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection

← Back to Compose Multiplatform

CenterAlignedTopAppBar

Overloads

CenterAlignedTopAppBar

Parameters