Nested Navigation in Jetpack Compose

Photo by Mick Haupt on Unsplash

In this article we will learn about nested navigation in jetpack compose.

Before that make sure you read about this article on navigation in jetpack compose.

What is Nested Navigation and where to use it ? Let’s understand through a real world example.

Nested Navigation in Jetpack Compose allows you to organize and structure your app’s navigation hierarchy into smaller, more manageable sections.

It’s particularly useful for apps with complex navigation flows that require multiple levels of navigation.

Suppose we have four screen Splash , Login , Signup and Dashboard . If you think about the navigation graph for this , you will make like this

Splash — > Login → SignUp → Dashboard

That looks fine , there is no issue with that. But if you focus on the Login and Signup screen , we can make them nested navigation , because both are inter-relatable.

After applying nested graph on it , it looks like this …

Splash

Register

• Login
• Signup

Dashboard

Let’s implement the nested navigation graph with the code.

sealed class NestedScreen(val route: String) {

    object Splash : NestedScreen("splash")

    object Register : NestedScreen("register") {
        object Login : NestedScreen("login")
        object Signup : NestedScreen("signup")
    }

    object Dashboard : NestedScreen("dashboard")

}

In the above code we have defined the routes for our navigation graph. Now the next thing is to create navigation graph . we will implement the nested graph in NavHost composable function.

If you notice in the NavHost composable function , we have a last parameter that is higher order extension function of NavGraphBuilder .

navigation()

it is an extension function of NavGraphBuilder class which will perform nested navigation.

it takes three main parameter :-

• startDestination :- it means the starter or first screen in nested navigation. In above sealed class Login is the start destination for nested navigation.
• route :- It is the identifier of nested graph . In above sealed class Register is the route , because it’s the key of nested navigation.
• NavGraphBuilder.() :- it is an extension higher order function , where we will define the composable functions for nested navigation.

Let’s create our navigation graph

@Composable
fun NestedNavigation() {

    val navHostController = rememberNavController()

    NavHost(
        navController = navHostController,
        startDestination = NestedScreen.Splash.route
    ) {

        composable(NestedScreen.Splash.route) {
            SplashScreen()
        }

        navigation(
            route = NestedScreen.Register.route,
            startDestination = NestedScreen.Register.Login.route
        ){
            composable(NestedScreen.Register.Login.route){
                LoginScreen()
            }
            composable(NestedScreen.Register.Signup.route){
                SignUpScreen()
            }
        }

        composable(NestedScreen.Dashboard.route){
            DashboardScreen()
        }

    }

}

As you can see in the above code , first we created a rememberNavContoller() which will keep track the back stack and manage the state of composable function.

After that our start destination is splash screen .

Next we defined nested navigation through navigation() function ( which is an extension function of NavGraphBuilder class). we also defined both route and start destination for nested navigation.

And in the last parameter of navigation function , we have defined the LoginScreen and SignupScreen composable functions.

This is how we can define nested navigation .

If you want to navigate from splash screen to register screen this is how we can do it.

@Composable
fun SplashScreen(
    navHostController: NavHostController
) {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Button(onClick = {
            navHostController.navigate(NestedScreen.Register.route)
        }) {
            Text(text = "Go to register screen")
        }
    }
}

In the above code we are navigating from splash screen to register and register is a nested graph and their login screen is the start destination.

Always remember this , Nested Navigation is made for complex projects , if you have big & scalable project that have lot of screens then without thinking about anything try to use Nested Navigation. It will makes your project more manageable and readable.

That’s all for today my friends hope you enjoyed and learnt something new from this article.