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

### SwipeDismissableNavHost

> Source set: Android

```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
```

#### 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](/jetpack-compose/androidx.wear.compose/compose-navigation/components/SwipeDismissableNavHost) uses platform gestures to detect the back gestures. |
| route | The route for the graph |
| builder | The builder used to construct the graph |

### SwipeDismissableNavHost

> Source set: Android

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

#### Parameters

| | |
| --- | --- |
| navController | `NavHostController` for this host |
| graph | Graph for this host |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/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](/jetpack-compose/androidx.wear.compose/compose-navigation/components/SwipeDismissableNavHost) uses platform gestures to detect the back gestures. |

#### Throws: IllegalArgumentException

if no WearNavigation.Destination is on the navigation backstack.

### SwipeDismissableNavHost

> Source set: Android

```kotlin
@Deprecated(
    "This overload is provided for backwards compatibility. " +
        "A newer overload is available with an additional userSwipeEnabled param.",
    level = DeprecationLevel.HIDDEN,
)
@Composable
public fun SwipeDismissableNavHost(
    navController: NavHostController,
    startDestination: String,
    modifier: Modifier = Modifier,
    state: SwipeDismissableNavHostState = rememberSwipeDismissableNavHostState(),
    route: String? = null,
    builder: NavGraphBuilder.() -> Unit,
): Unit
```

#### 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 |

### SwipeDismissableNavHost

> Source set: Android

```kotlin
@Deprecated(
    "This overload is provided for backwards compatibility. " +
        "A newer overload is available with an additional userSwipeEnabled param.",
    level = DeprecationLevel.HIDDEN,
)
@Composable
public fun SwipeDismissableNavHost(
    navController: NavHostController,
    graph: NavGraph,
    modifier: Modifier = Modifier,
    state: SwipeDismissableNavHostState = rememberSwipeDismissableNavHostState(),
): Unit
```

#### Parameters

| | |
| --- | --- |
| navController | `NavHostController` for this host |
| graph | Graph for this host |
| modifier | [Modifier](/jetpack-compose/androidx.compose.ui/ui/interfaces/Modifier) to be applied to the layout |
| state | State containing information about ongoing swipe and animation. |

#### Throws: IllegalArgumentException

if no WearNavigation.Destination is on the navigation backstack.

## Code Examples

### SimpleNavHost

```kotlin
@Sampled
@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") }
            }
        }
    }
}
```

### NavHostWithNamedArgument

```kotlin
@Sampled
@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")
            }
        }
    }
}
```