State of Compose 2023 results are in! Click here to learn more

← Back to Material 3 Compose

SmallTopAppBar

Component
in
Material 3
. Since 1.0.0

Overview

Code Examples

Video

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

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

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

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

A simple top app bar looks like:

Overloads

SmallTopAppBar

@Deprecated(
    message = "Use TopAppBar instead.",
    replaceWith = ReplaceWith(
        "TopAppBar(title, modifier, navigationIcon, actions, windowInsets, colors, " +
            "scrollBehavior)"
    ),
    level = DeprecationLevel.WARNING
)
@ExperimentalMaterial3Api
@Composable
fun SmallTopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {},
    actions: @Composable RowScope.() -> Unit = {},
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
)

Parameters

NameDescription
titlethe title to be displayed in the top app bar
modifierthe Modifier to be applied to this top app bar
navigationIconthe navigation icon displayed at the start of the top app bar. This should typically be an IconButton or IconToggleButton.
actionsthe 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.
windowInsetsa window insets that app bar will respect.
colorsTopAppBarColors that will be used to resolve the colors used for this top app bar in different states. See TopAppBarDefaults.topAppBarColors.
scrollBehaviora 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. @deprecated use TopAppBar instea