Basic Usage

Define a root navigator by implementing the NavigationRoot interface:

object Root : NavigationRoot

Define a set of screens which belong to that navigator by using the ChildScreenOf<T> interface:

object Home : ChildScreenOf<Root>
object Profile : ChildScreenOf<Root>

Now you can define a navigation graph. Create your root navigator with rememberNavigator<Root>() and pass it to a Router. Inside the Router { .. } block, define the content for each screen:

val rootNavigator = rememberNavigator<Root>()

Router(navigator) {
    screen<Home> {
        HomeScreen(navigator)
    }

    screen<Profile> {
        ProfileScreen(navigator)
    }
}

Navigate to a screen:

rootNavigator.navigate(Profile)

info

Compose Router will automatically choose the first screen as your start destination

Create a natural navigation hierarchy by nesting Routers:

val navigator = rememberNavigator<Root>()

Router(navigator) {
    screen<Home> { .. }

    screen<Profile> {
        val profileRouter = rememberNavigator()

        Router(profileRouter) {
            screen<Settings> { .. }
        }
    }
}

Compose Router is type-safe at the graph declaration:

Router(navigator) {
    screen<Home> { .. }

    screen<Profile> { .. }

    screen<Settings> {
        // Error: Settings is not a child screen of Root
    }
}

and during navigation:

// Error: Settings is not a child screen of Root
navigator.navigate(Settings)