Skip to content

Basic navigation

To set up basic navigation, simply implement the Screen interface for a data class or object.
The Content() function of a Screen is used for displaying its contents.

data object HomeScreen : Screen {

    @Composable
    override fun Content() {
        // ...
    }
}

data class DetailsScreen(val id: Long) : Screen {

    @Composable
    override fun Content() {
        // ...
    }
}

Then anywhere in your composable logic call Navigator(), passing in its initial screens.
A navigator is used to manage the screens you create.
You can push, pop or replace screens within it.

@Composable
fun App(){
    Navigator(HomeScreen)
}

data object HomeScreen : Screen {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow

        Button(
            onClick = {
                navigator.push(DetailsScreen(1))
                // navigator.replace(DetailsScreen(1)) is also possible
                // "replace" removes the current screen and replaces it with the one specified.
            }
        ) {
            Text(text = "Show details")
        }
    }
}
data class DetailsScreen(val id: Long) : Screen {

    @Composable
    override fun Content() {
        val navigator = LocalNavigator.currentOrThrow

        Button(
            onClick = {
                navigator.pop()
                // If we invoked "replace" on the current screen with this one instead of pushing, "pop" wouldn't do anything.
            }
        ) {
            Text(text = "Go back")
        }
    }
}

LocalNavigator is a function that returns the navigator that owns the current screen.

You can find source code for a working example here.