---
title: "ModalBottomSheetLayout"
description: "Create a [ModalBottomSheetLayout] displaying content from a [BottomSheetNavigator]."
type: "component"
---
## API Reference

### ModalBottomSheetLayout

> Source set: Common

```kotlin
@Deprecated("Maintained for binary compatibility", level = DeprecationLevel.HIDDEN)
@Composable
// Keep defaults in sync with androidx.compose.material.ModalBottomSheetLayout
public fun ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| bottomSheetNavigator | The navigator that manages the bottom sheet content. |
| modifier | Optional [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) for the entire component. |
| sheetShape | The shape of the bottom sheet. |
| sheetElevation | The elevation of the bottom sheet. |
| sheetBackgroundColor | The background color of the bottom sheet. |
| sheetContentColor | The preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for `sheetBackgroundColor`, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet. |
| scrimColor | The color of the scrim that is applied to the rest of the screen when the bottom sheet is visible. If the color passed is `Color.Unspecified`, then a scrim will no longer be applied and the bottom sheet will not block interaction with the rest of the screen when visible. |
| content | The content of rest of the screen. |

### ModalBottomSheetLayout

> Source set: Common

```kotlin
@Composable
// Keep defaults in sync with androidx.compose.material.ModalBottomSheetLayout
public fun ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit,
)
```

#### Parameters

| | |
| --- | --- |
| bottomSheetNavigator | The navigator that manages the bottom sheet content. |
| modifier | Optional [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) for the entire component. |
| sheetGesturesEnabled | Whether the bottom sheet can be interacted with by gestures. |
| sheetShape | The shape of the bottom sheet. |
| sheetElevation | The elevation of the bottom sheet. |
| sheetBackgroundColor | The background color of the bottom sheet. |
| sheetContentColor | The preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for `sheetBackgroundColor`, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet. |
| scrimColor | The color of the scrim that is applied to the rest of the screen when the bottom sheet is visible. If the color passed is `Color.Unspecified`, then a scrim will no longer be applied and the bottom sheet will not block interaction with the rest of the screen when visible. |
| content | The content of rest of the screen. |

## Code Examples

### BottomSheetNavDemo

```kotlin
@Sampled
@Composable
fun BottomSheetNavDemo() {
    val bottomSheetNavigator = rememberBottomSheetNavigator()
    val navController = rememberNavController(bottomSheetNavigator)

    ModalBottomSheetLayout(bottomSheetNavigator) {
        NavHost(navController, Destinations.Home) {
            composable(Destinations.Home) {
                HomeScreen(
                    showSheet = {
                        navController.navigate(Destinations.Sheet + "?arg=From Home Screen")
                    },
                    showFeed = { navController.navigate(Destinations.Feed) },
                )
            }
            composable(Destinations.Feed) { Text("Feed!") }
            bottomSheet(Destinations.Sheet + "?arg={arg}") { backstackEntry ->
                val arg = backstackEntry.arguments?.getString("arg") ?: "Missing argument :("
                BottomSheet(
                    showFeed = { navController.navigate(Destinations.Feed) },
                    showAnotherSheet = {
                        navController.navigate(Destinations.Sheet + "?arg=${UUID.randomUUID()}")
                    },
                    arg = arg,
                )
            }
        }
    }
}
```