---
title: "SwipeDismissableNavHost"
description: "Provides a place in the Compose hierarchy for self-contained navigation to occur, with backwards
navigation provided by a swipe gesture.

Once this is called, any Composable within the given [NavGraphBuilder] can be navigated to from
the provided [navController].

The builder passed into this method is [remember]ed. This means that for this NavHost, the
contents of the builder cannot be changed.

During a swipe-to-dismiss gesture, the previous navigation level (if any) is shown in the
background. BackgroundScrimColor and ContentScrimColor of it are taken from
[LocalSwipeToDismissBackgroundScrimColor] and [LocalSwipeToDismissContentScrimColor].

Below API level 36, content of the current navigation level is displayed within a
[BasicSwipeToDismissBox] to detect swipe back gestures.

API level 36 onwards, [SwipeDismissableNavHost] listens to platform predictive back events for
navigation, and [BasicSwipeToDismissBox] is not used for swipe gesture detection.

Example of a [SwipeDismissableNavHost] alternating between 2 screens:


Example of a [SwipeDismissableNavHost] for which a destination has a named argument:"
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun SwipeDismissableNavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    userSwipeEnabled: Boolean = true,
    state: SwipeDismissableNavHostState = rememberSwipeDismissableNavHostState(),
    route: String? = null,
    builder: NavGraphBuilder.() -> Unit,
): Unit
```


Provides a place in the Compose hierarchy for self-contained navigation to occur, with backwards
navigation provided by a swipe gesture.

Once this is called, any Composable within the given `NavGraphBuilder` can be navigated to from
the provided `navController`.

The builder passed into this method is `remember`ed. This means that for this NavHost, the
contents of the builder cannot be changed.

During a swipe-to-dismiss gesture, the previous navigation level (if any) is shown in the
background. BackgroundScrimColor and ContentScrimColor of it are taken from
`LocalSwipeToDismissBackgroundScrimColor` and `LocalSwipeToDismissContentScrimColor`.

Below API level 36, content of the current navigation level is displayed within a
`BasicSwipeToDismissBox` to detect swipe back gestures.

API level 36 onwards, `SwipeDismissableNavHost` listens to platform predictive back events for
navigation, and `BasicSwipeToDismissBox` is not used for swipe gesture detection.

Example of a `SwipeDismissableNavHost` alternating between 2 screens:


Example of a `SwipeDismissableNavHost` for which a destination has a named argument:

#### Parameters

| | |
| --- | --- |
| navController | The navController for this host |
| startDestination | The route for the start destination |
| modifier | The modifier to be applied to the layout |
| userSwipeEnabled | `Boolean` Whether swipe-to-dismiss gesture is enabled. |
| state | State containing information about ongoing swipe and animation. This parameter is unused API level 36 onwards, because the platform supports predictive back and `SwipeDismissableNavHost` uses platform gestures to detect the back gestures. |
| route | The route for the graph |
| builder | The builder used to construct the graph |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun SwipeDismissableNavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier,
    userSwipeEnabled: Boolean = true,
    state: SwipeDismissableNavHostState = rememberSwipeDismissableNavHostState(),
)
```


Provides a place in the Compose hierarchy for self-contained navigation to occur, with backwards
navigation provided by a swipe gesture.

Once this is called, any Composable within the given `NavGraphBuilder` can be navigated to from
the provided `navController`.

The builder passed into this method is `remember`ed. This means that for this NavHost, the
contents of the builder cannot be changed.

During a swipe-to-dismiss gesture, the previous navigation level (if any) is shown in the
background. BackgroundScrimColor and ContentScrimColor of it are taken from
`LocalSwipeToDismissBackgroundScrimColor` and `LocalSwipeToDismissContentScrimColor`.

Below API level 36, content of the current navigation level is displayed within a
`BasicSwipeToDismissBox` to detect swipe back gestures.

API level 36 onwards, `SwipeDismissableNavHost` listens to platform predictive back events for
navigation, and `BasicSwipeToDismissBox` is not used for swipe gesture detection. Therefore,
`Modifier.edgeSwipeToDismiss` is not compatible with `SwipeDismissableNavHost` for API level 36
onwards.

Example of a `SwipeDismissableNavHost` alternating between 2 screens:


Example of a `SwipeDismissableNavHost` for which a destination has a named argument:

#### Parameters

| | |
| --- | --- |
| navController | `NavHostController` for this host |
| graph | Graph for this host |
| modifier | `Modifier` to be applied to the layout |
| userSwipeEnabled | `Boolean` Whether swipe-to-dismiss gesture is enabled. |
| state | State containing information about ongoing swipe and animation. This parameter is unused API level 36 onwards, because the platform supports predictive back and `SwipeDismissableNavHost` uses platform gestures to detect the back gestures. |




<div class='sourceset sourceset-android'>Android</div>


> **Deprecated** This overload is provided for backwards compatibility. A newer overload is available with an additional userSwipeEnabled param.

```kotlin
@Composable
public fun SwipeDismissableNavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    state: SwipeDismissableNavHostState = rememberSwipeDismissableNavHostState(),
    route: String? = null,
    builder: NavGraphBuilder.() -> Unit,
): Unit
```


Provides a place in the Compose hierarchy for self-contained navigation to occur, with backwards
navigation provided by a swipe gesture.

Once this is called, any Composable within the given `NavGraphBuilder` can be navigated to from
the provided `navController`.

The builder passed into this method is `remember`ed. This means that for this NavHost, the
contents of the builder cannot be changed.

Content is displayed within a `BasicSwipeToDismissBox`, showing the current navigation level.
During a swipe-to-dismiss gesture, the previous navigation level (if any) is shown in the
background. BackgroundScrimColor and ContentScrimColor of it are taken from
`LocalSwipeToDismissBackgroundScrimColor` and `LocalSwipeToDismissContentScrimColor`.

Example of a `SwipeDismissableNavHost` alternating between 2 screens:


Example of a `SwipeDismissableNavHost` for which a destination has a named argument:

#### Parameters

| | |
| --- | --- |
| navController | The navController for this host |
| startDestination | The route for the start destination |
| modifier | The modifier to be applied to the layout |
| state | State containing information about ongoing swipe and animation. |
| route | The route for the graph |
| builder | The builder used to construct the graph |




<div class='sourceset sourceset-android'>Android</div>


> **Deprecated** This overload is provided for backwards compatibility. A newer overload is available with an additional userSwipeEnabled param.

```kotlin
@Composable
public fun SwipeDismissableNavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier,
    state: SwipeDismissableNavHostState = rememberSwipeDismissableNavHostState(),
): Unit
```


Provides a place in the Compose hierarchy for self-contained navigation to occur, with backwards
navigation provided by a swipe gesture.

Once this is called, any Composable within the given `NavGraphBuilder` can be navigated to from
the provided `navController`.

The builder passed into this method is `remember`ed. This means that for this NavHost, the
contents of the builder cannot be changed.

Content is displayed within a `BasicSwipeToDismissBox`, showing the current navigation level.
During a swipe-to-dismiss gesture, the previous navigation level (if any) is shown in the
background. BackgroundScrimColor and ContentScrimColor of it are taken from
`LocalSwipeToDismissBackgroundScrimColor` and `LocalSwipeToDismissContentScrimColor`.

Example of a `SwipeDismissableNavHost` alternating between 2 screens:


Example of a `SwipeDismissableNavHost` for which a destination has a named argument:

#### Parameters

| | |
| --- | --- |
| navController | `NavHostController` for this host |
| graph | Graph for this host |
| modifier | `Modifier` to be applied to the layout |
| state | State containing information about ongoing swipe and animation. |





## Code Examples
### NavHostWithNamedArgument
```kotlin
@Composable
fun NavHostWithNamedArgument() {
    // Example of using a NavHost where we pass an argument to a destination in the NavGraph.
    val navController = rememberSwipeDismissableNavController()
    SwipeDismissableNavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ScalingLazyColumn(
                modifier = Modifier.fillMaxSize().background(Color.DarkGray),
                contentPadding = PaddingValues(horizontal = 8.dp, vertical = 32.dp),
                verticalArrangement = Arrangement.Center,
            ) {
                item { ListHeader { Text("List Screen") } }
                items(5) { index ->
                    CompactChip(
                        modifier = Modifier.padding(vertical = 4.dp),
                        onClick = { navController.navigate("detail/$index") },
                        label = {
                            Text(
                                text = "Item $index",
                                textAlign = TextAlign.Center,
                                modifier = Modifier.fillMaxSize(),
                            )
                        },
                    )
                }
            }
        }
        composable(
            route = "detail/{Id}",
            arguments = listOf(navArgument("Id") { type = NavType.IntType }),
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments?.getInt("Id") ?: 0
            Column(
                modifier = Modifier.fillMaxSize().background(Color.DarkGray),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                ListHeader { Text("Details Screen") }
                Text("Item $itemId")
            }
        }
    }
}
```
### SimpleNavHost
```kotlin
@Composable
fun SimpleNavHost() {
    // Example of using a NavHost where each destination in the NavGraph has a unique name.
    val navController = rememberSwipeDismissableNavController()
    SwipeDismissableNavHost(navController = navController, startDestination = "off") {
        composable("off") {
            Column(
                modifier = Modifier.fillMaxSize().background(Color.DarkGray),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                Button(onClick = { navController.navigate("on") }) { Text("On") }
            }
        }
        composable("on") {
            Column(
                modifier = Modifier.fillMaxSize().background(Color.DarkGray),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
            ) {
                Button(onClick = { navController.navigate("off") }) { Text("Off") }
            }
        }
    }
}
```