Jetpack Compose Tutorial

Introduction to Jetpack Compose Composable Functions & Preview Key Concepts State & remember Introduction Layouts: Column, Row & Box Modifiers Lists with LazyColumn State Hoisting & ViewModel Navigation in Compose Material 3 & Theming Side Effects (LaunchedEffect & more) Networking & Loading State in Compose Animations in Compose

Navigation in Compose

June 02, 2026 • 1 min read

Navigation-Compose manages moving between screens using a NavHost and string routes.

@Composable
fun AppNav() {
    val nav = rememberNavController()
    NavHost(navController = nav, startDestination = "home") {
        composable("home") {
            HomeScreen(onOpen = { id -> nav.navigate("detail/$id") })
        }
        composable("detail/{id}") { entry ->
            val id = entry.arguments?.getString("id")
            DetailScreen(id)
        }
    }
}
  • rememberNavController() holds the back stack.
  • Define each screen with composable(\"route\").
  • Pass arguments in the route (detail/{id}) and read them from the entry.
  • nav.popBackStack() goes back.
Tip: Keep navigation logic out of leaf composables — pass lambdas like onOpen so screens stay reusable.

Summary

Navigation-Compose uses a NavHost with routes. Navigate with the controller, pass arguments in the route, and keep screens decoupled via lambdas.