App bar for the back layer. Make sure that the [peekHeight] is equal to the height of the app bar, so that the app bar is fully visible. Consider using [TopAppBar] but set the elevation to 0dp and background color to transparent as a surface is already provided.

appBar

backLayerContent

frontLayerContent

Optional [Modifier] for the root of the scaffold.

modifier

scaffoldState

Whether or not the backdrop can be interacted with by gestures.

gesturesEnabled

The height of the visible part of the back layer when it is concealed.

peekHeight

The minimum height of the front layer when it is inactive.

headerHeight

Whether the app bar should be shown when the back layer is revealed. By default, it will always be shown above the back layer's content. If this is set to `false`, the back layer will automatically switch between the app bar and its content with an animation.

persistentAppBar

Whether the front layer should stick to the height of the back layer.

stickyFrontLayer

backLayerBackgroundColor

The preferred content color provided by the back layer to its children. Defaults to the matching content color for [backLayerBackgroundColor], or if that is not a color from the theme, this will keep the same content color set above the back layer.

backLayerContentColor

frontLayerShape

frontLayerElevation

frontLayerBackgroundColor

The preferred content color provided by the back front to its children. Defaults to the matching content color for [frontLayerBackgroundColor], or if that is not a color from the theme, this will keep the same content color set above the front layer.

frontLayerContentColor

The color of the scrim applied to the front layer when the back layer is revealed. If the color passed is [Color.Unspecified], then a scrim will not be applied and interaction with the front layer will not be blocked when the back layer is revealed.

frontLayerScrimColor

The component hosting the snackbars shown inside the scaffold

snackbarHost

BackdropScaffold

the icon content of this BottomAppBar. The default layout here is a [Row], so content inside will be placed horizontally.

actions

the [Modifier] to be applied to this BottomAppBar

optional floating action button at the end of this BottomAppBar

floatingActionButton

the color used for the background of this BottomAppBar. Use [Color.Transparent] to have no color.

containerColor

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

contentColor

when [containerColor] is [ColorScheme.surface], a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: [Surface].

tonalElevation

the padding applied to the content of this BottomAppBar

contentPadding

a window insets that app bar will respect

windowInsets

BottomAppBar

optional [Modifier] for this BottomNavigation

The background color for this BottomNavigation

backgroundColor

The preferred content color provided by this BottomNavigation to its children. Defaults to either the matching content color for [backgroundColor], or if [backgroundColor] is not a color from the theme, this will keep the same value set above this BottomNavigation.

elevation

destinations inside this BottomNavigation, this should contain multiple [BottomNavigationItem]

content

BottomNavigation

sheetContent

the [Modifier] to be applied to this scaffold

the height of the bottom sheet when it is collapsed

sheetPeekHeight

sheetShape

sheetContainerColor

the preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for [sheetContainerColor], or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.

sheetContentColor

sheetTonalElevation

sheetShadowElevation

optional visual marker to pull the scaffold's bottom sheet

sheetDragHandle

whether the sheet swiping is enabled and should react to the user's input

sheetSwipeEnabled

top app bar of the screen, typically a [SmallTopAppBar]

topBar

component to host [Snackbar]s that are pushed to be shown via [SnackbarHostState.showSnackbar], typically a [SnackbarHost]

the color used for the background of this scaffold. Use [Color.Transparent] to have no color.

the preferred color for content inside this scaffold. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

content of the screen. The lambda receives a [PaddingValues] that should be applied to the content root via [Modifier.padding] and [Modifier.consumeWindowInsets] to properly offset top and bottom bars. If using [Modifier.verticalScroll], apply this modifier to the child of the scroll, and not on the scroll itself

Material Design standard bottom sheet scaffold

BottomSheetScaffold

the title to be displayed in the top app bar

title

the [Modifier] to be applied to this top app bar

the navigation icon displayed at the start of the top app bar. This should typically be an [IconButton] or [IconToggleButton].

navigationIcon

the actions displayed at the end of the top app bar. This should typically be [IconButton]s. The default layout here is a [Row], so icons inside will be placed horizontally.

a window insets that app bar will respect.

[TopAppBarColors] that will be used to resolve the colors used for this top app bar in different states. See [TopAppBarDefaults.centerAlignedTopAppBarColors].

colors

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]

scrollBehavior

Material Design center-aligned small top app bar

CenterAlignedTopAppBar

drawerContent

the [Modifier] to be applied to this drawer

drawerState

whether or not the drawer can be interacted by gestures

DismissibleNavigationDrawer

the query text to be shown in the search bar's input field

query

the callback to be invoked when the input service updates the query. An updated text comes as a parameter of the callback.

onQueryChange

the callback to be invoked when the input service triggers the [ImeAction.Search] action. The current [query] comes as a parameter of the callback.

onSearch

active

the callback to be invoked when this search bar's active state is changed

onActiveChange

the [Modifier] to be applied to this search bar

controls the enabled state of this search bar. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

enabled

the placeholder to be displayed when the search bar's [query] is empty.

placeholder

the leading icon to be displayed at the beginning of the search bar container

leadingIcon

the trailing icon to be displayed at the end of the search bar container

trailingIcon

shape

[SearchBarColors] that will be used to resolve the colors used for this search bar in different states. See [SearchBarDefaults.colors].

when [SearchBarColors.containerColor] is [ColorScheme.surface], a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: [Surface].

the [MutableInteractionSource] representing the stream of [Interaction]s for this search bar. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this search bar in different states.

interactionSource

the content of this search bar that will be displayed below the input fiel

DockedSearchBar

the title to be displayed in the top app bar. This title will be used in the app bar's expanded and collapsed states, although in its collapsed state it will be composed with a smaller sized [TextStyle]

[TopAppBarColors] that will be used to resolve the colors used for this top app bar in different states. See [TopAppBarDefaults.largeTopAppBarColors].

LargeTopAppBar

selected

onClick

text

icon

controls the enabled state of this tab. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

the color for the content of this tab when selected, and the color of the ripple.

selectedContentColor

the color for the content of this tab when not selected

unselectedContentColor

the [MutableInteractionSource] representing the stream of [Interaction]s for this tab. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this tab in different states.  @see Ta

LeadingIconTab

[TopAppBarColors] that will be used to resolve the colors used for this top app bar in different states. See [TopAppBarDefaults.mediumTopAppBarColors].

MediumTopAppBar

composable that represents content inside the drawer

whether or not drawer can be interacted by gestures

drawerShape

drawer sheet elevation. This controls the size of the shadow below the drawer sheet

drawerElevation

background color to be used for the drawer sheet

drawerBackgroundColor

color of the content to use inside the drawer sheet. Defaults to either the matching content color for [drawerBackgroundColor], or, if it is not a color from the theme, this will keep the same value set above this Surface.

drawerContentColor

color of the scrim that obscures content when the drawer is open

scrimColor

content of the rest of the UI  @throws IllegalStateException when parent has [Float.POSITIVE_INFINITY] widt

ModalDrawer

the [Modifier] to be applied to this drawer's content

defines the shape of this drawer's container

the color used for the background of this drawer. Use [Color.Transparent] to have no color.

drawerContainerColor

the preferred color for content inside this drawer. Defaults to either the matching content color for [drawerContainerColor], or to the current [LocalContentColor] if [drawerContainerColor] is not a color from the theme.

when [drawerContainerColor] is [ColorScheme.surface], a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: [Surface].

drawerTonalElevation

content inside of a modal navigation drawe

Content inside of a modal navigation drawer.

ModalDrawerSheet

ModalNavigationDrawer

the [Modifier] to be applied to this navigation bar

the color used for the background of this navigation bar. Use [Color.Transparent] to have no color.

the preferred color for content inside this navigation bar. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

the content of this navigation bar, typically 3-5 [NavigationBarItem]

NavigationBar

Content that needs to be displayed on the drawer based on whether the drawer is [DrawerValue.Open] or [DrawerValue.Closed]. Drawer-entries can be animated when the drawer moves from Closed to Open state and vice-versa. For, e.g., the entry could show only an icon in the Closed state and slide in text to form (icon + text) when in the Open state.  To limit the width of the drawer in the open or closed state, wrap the content in a box with the required width.

Navigation drawers provide ergonomic access to destinations in an app.

NavigationDrawer

label

the [Modifier] to be applied to this item

optional icon for this item, typically an [Icon]

optional badge to show on this item from the end side

badge

[NavigationDrawerItemColors] that will be used to resolve the colors used for this item in different states. See [NavigationDrawerItemDefaults.colors].

the [MutableInteractionSource] representing the stream of [Interaction]s for this item. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this item in different states

NavigationDrawerItem

the [Modifier] to be applied to this navigation rail

the color used for the background of this navigation rail. Use [Color.Transparent] to have no color.

the preferred color for content inside this navigation rail. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

optional header that may hold a [FloatingActionButton] or a logo

header

the content of this navigation rail, typically 3-7 [NavigationRailItem]

NavigationRail

controls the enabled state of this item. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

whether to always show the label for this item. If false, the label will only be shown when this item is selected.

alwaysShowLabel

[NavigationRailItemColors] that will be used to resolve the colors used for this item in different states. See [NavigationRailItemDefaults.colors].

NavigationRailItem

Material Design navigation permanent drawer

PermanentNavigationDrawer

bottom bar of the screen, typically a [NavigationBar]

bottomBar

Main action button of the screen, typically a [FloatingActionButton]

position of the FAB on the screen. See [FabPosition].

floatingActionButtonPosition

window insets to be passed to [content] slot via [PaddingValues] params. Scaffold will take the insets into account from the top/bottom only if the [topBar]/ [bottomBar] are not present, as the scaffold expect [topBar]/[bottomBar] to handle insets instead

contentWindowInsets

Scaffold

selectedTabIndex

the [Modifier] to be applied to this tab row

the color used for the background of this tab row. Use [Color.Transparent] to have no color.

the preferred color for content inside this tab row. Defaults to either the matching content color for [containerColor], or to the current [LocalContentColor] if [containerColor] is not a color from the theme.

ScrollableTabRow

A list of all Jetpack Compose Navigation components listed on our website, you can use in your Jetpack Compose projects.

Jetpack Compose Navigation components