Compose Navigation Nested Graph Guide - Auth Flow & BottomNav

Nested Navigation Graphs in Jetpack Compose

Implement complex navigation with nested graphs for auth flows and bottom navigation.

Auth Graph Setup

NavHost(navController, startDestination = "auth") {
    navigation(
        route = "auth",
        startDestination = "login"
    ) {
        composable("login") { LoginScreen() }
        composable("signup") { SignupScreen() }
    }

    navigation(
        route = "app",
        startDestination = "home"
    ) {
        composable("home") { HomeScreen() }
        composable("profile") { ProfileScreen() }
    }
}

PopUpTo Inclusive for Auth

navController.navigate("app") {
    popUpTo("auth") { inclusive = true }
}

BottomNav with Nested Graphs

navigation(
    route = "feed",
    startDestination = "feed_home"
) {
    composable("feed_home") { FeedScreen() }
    composable("feed_detail/{id}") { FeedDetailScreen() }
}

SaveState and RestoreState

NavHost(navController) {
    composable(
        route = "home",
        enterTransition = { slideInHorizontally() },
        exitTransition = { slideOutHorizontally() }
    ) { backStackEntry ->
        // State preserved on back
    }
}

Type-Safe Routes with Kotlin Serialization

@Serializable
data class DetailRoute(val id: Int)

composable<DetailRoute> { backStackEntry ->
    val args = backStackEntry.toRoute<DetailRoute>()
    DetailScreen(id = args.id)
}

SavedStateHandle Result Passing

navController.currentBackStackEntry
    ?.savedStateHandle
    ?.set("result", value)

Navigation Best Practices

1. Keep auth graph separate
2. Use nested graphs for feature screens
3. Implement proper back stack management
4. Type-safe routes prevent runtime errors

---

8 Android app templates on Gumroad