Quick Start

First, let's declare some destinations, in Guia, they are called a NavigationKey

@Parcelize
class HomeKey: NavigationKey

@Parcelize
class ProfileKey(val profileId: String): NavigationKey

Then we declare a Navigator:

val navigator = rememberNavigator(initialKey = HomeKey()) // Initial Key is optional

To link a NavigationKey to a Composable we can use the builder parameter in rememberNavigator:

val navigator = rememberNavigator(initialKey = HomeKey()) {
    screen<HomeKey> { HomeScreen() }
    bottomSheet<ProfileKey> { key -> ProfileScreen(profileId = key.profileId) }
    dialog<DialogKey> { DialogScreen() }
}

Alternatively, a key can host its own Composable, called a NavigationNode, then we don't need to declare it in our builder, the builder is convenient in Multi Module projects

class DetailsBottomSheetKey(
    val item: String
) : NavigationKey.WithNode<BottomSheet> {

    override fun navigationNode() = BottomSheet {
        Text(text = "Item: $item")
    }
}

To get the instance of our navigator and do some navigation:

(For a list of all default operations provided by Guia check Navigation Operations)

@Composable
fun HomeScreen() {
    val navigator = requireLocalNavigator()
    
    // On Button click or some other event
    navigator.push(ProfileKey("some_id"))
    
    // We can also go back by calling pop
    navigator.pop()
}

Finally we render the navigator's state:

navigator.NavContainer()

We can also add some Transitions, type-safe Results, bottom-nav behaviour and more. Check The Lore for more comprehensive usage of Guia.

Last updated