# androidx.compose.material.navigation

Common/All

## Classes

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator` | Navigator that drives a `https://developer.android.com/reference/kotlin/androidx/compose/material/ModalBottomSheetState` for use of `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)`s with the navigation library. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator.Destination` | `https://developer.android.com/reference/kotlin/androidx/navigation/NavDestination` specific to `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigatorDestinationBuilder` | DSL for constructing a new `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator.Destination` | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigatorSheetState` | The state of a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` that the `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator` drives | Cmn |

## Composables

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable` | Create a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` displaying content from a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/rememberBottomSheetNavigator.composable` | Create and remember a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator`. | Cmn |

## Extension functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/navigation/NavGraphBuilder.https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/package-summary#(androidx.navigation.NavGraphBuilder).bottomSheet(kotlin.String,kotlin.collections.List,kotlin.collections.List,kotlin.Function2)( route: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, arguments: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NamedNavArgument>, deepLinks: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NavDeepLink>, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.(backstackEntry: https://developer.android.com/reference/kotlin/androidx/navigation/NavBackStackEntry) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Add the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` as bottom sheet content to the `https://developer.android.com/reference/kotlin/androidx/navigation/NavGraphBuilder` | Cmn |
| `inline https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html> https://developer.android.com/reference/kotlin/androidx/navigation/NavGraphBuilder.https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/package-summary#(androidx.navigation.NavGraphBuilder).bottomSheet(kotlin.collections.Map,kotlin.collections.List,kotlin.collections.List,kotlin.Function2)( typeMap: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-type/index.html, https://developer.android.com/reference/kotlin/androidx/navigation/NavType<*>>, arguments: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NamedNavArgument>, deepLinks: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NavDeepLink>, noinline content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.(backstackEntry: https://developer.android.com/reference/kotlin/androidx/navigation/NavBackStackEntry) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Add the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` as bottom sheet content to the `https://developer.android.com/reference/kotlin/androidx/navigation/NavGraphBuilder` | Cmn |

## Extension functions

### NavGraphBuilder.bottomSheet

Cmn Artifact: [androidx.compose.material:material-navigation](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/navigation/NavGraphBuilder.kt+function:bottomSheet) Added in [1.7.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.7.0)

```
fun NavGraphBuilder.bottomSheet(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit
): Unit
```

Add the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` as bottom sheet content to the `https://developer.android.com/reference/kotlin/androidx/navigation/NavGraphBuilder`

```kotlin
import androidx.compose.material.Text
import androidx.compose.material.navigation.ModalBottomSheetLayout
import androidx.compose.material.navigation.bottomSheet
import androidx.compose.material.navigation.rememberBottomSheetNavigator
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

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,
            )
        }
    }
}
```

| Parameters |
|---|---|
| `route: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | route for the destination |
| `arguments: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NamedNavArgument> = emptyList()` | list of arguments to associate with destination |
| `deepLinks: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NavDeepLink> = emptyList()` | list of deep links to associate with the destinations |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.(backstackEntry: https://developer.android.com/reference/kotlin/androidx/navigation/NavBackStackEntry) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the sheet content at the given destination |

### NavGraphBuilder.bottomSheet

Cmn Artifact: [androidx.compose.material:material-navigation](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/navigation/NavGraphBuilder.kt+function:bottomSheet)

```
inline fun <T : Any> NavGraphBuilder.bottomSheet(
    typeMap: Map<KType, NavType<*>> = emptyMap(),
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    noinline content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit
): Unit
```

Add the `https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable` as bottom sheet content to the `https://developer.android.com/reference/kotlin/androidx/navigation/NavGraphBuilder`

```kotlin
import androidx.compose.material.Text
import androidx.compose.material.navigation.ModalBottomSheetLayout
import androidx.compose.material.navigation.bottomSheet
import androidx.compose.material.navigation.rememberBottomSheetNavigator
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

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,
            )
        }
    }
}
```

| Parameters |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html>` | route from a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-class/index.html` for the destination |
| `typeMap: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-map/index.html<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-type/index.html, https://developer.android.com/reference/kotlin/androidx/navigation/NavType<*>> = emptyMap()` | map of destination arguments' kotlin type `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.reflect/-k-type/index.html` to its respective custom `https://developer.android.com/reference/kotlin/androidx/navigation/NavType`. May be empty if `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/package-summary#(androidx.navigation.NavGraphBuilder).bottomSheet(kotlin.collections.Map,kotlin.collections.List,kotlin.collections.List,kotlin.Function2)` does not use custom NavTypes. |
| `arguments: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NamedNavArgument> = emptyList()` | list of arguments to associate with destination |
| `deepLinks: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/navigation/NavDeepLink> = emptyList()` | list of deep links to associate with the destinations |
| `noinline content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.(backstackEntry: https://developer.android.com/reference/kotlin/androidx/navigation/NavBackStackEntry) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the sheet content at the given destination |