Posted by Don Turner – Developer Relations Engineer

Navigating between screens in your app must be easy, should not it? Nevertheless, constructing a sturdy, scalable, and pleasant navigation expertise could be a problem. For years, the Jetpack Navigation library has been a key software for builders, however because the Android UI panorama has developed, significantly with the rise of Jetpack Compose, we acknowledged the necessity for a brand new method.

At the moment, we’re excited to introduce Jetpack Navigation 3, a brand new navigation library constructed from the bottom up particularly for Compose. For brevity, we’ll simply name it Nav3 to any extent further. This library embraces the declarative programming mannequin and Compose state as basic constructing blocks.

Why a brand new navigation library?

The unique Jetpack Navigation library (typically known as Nav2 because it’s on main model 2) was initially introduced again in 2018, earlier than AndroidX and earlier than Compose. Whereas it served its unique objectives nicely, we heard from you that it had a number of limitations when working with fashionable Compose patterns.

One key limitation was that the again stack state may solely be noticed not directly. This meant there may very well be two sources of reality, doubtlessly resulting in an inconsistent software state. Additionally, Nav2’s NavHost was designed to show solely a single vacation spot – the topmost one on the again stack – filling the accessible house. This made it troublesome to implement adaptive layouts that show a number of panes of content material concurrently, similar to a list-detail format on massive screens.

Founding ideas

Nav3 is constructed upon ideas designed to offer larger flexibility and developer management:

• You personal the again stack: You, the developer, not the library, personal and management the again stack. It is a easy record which is backed by Compose state. Particularly, Nav3 expects your again stack to be SnapshotStateList<T> the place T could be any kind you select. You may navigate by including or eradicating objects (Ts), and state modifications are noticed and mirrored by Nav3’s UI.
• Get out of your method: We heard that you do not like a navigation library to be a black field with inaccessible inside elements and state. Nav3 is designed to be open and extensible, offering you with constructing blocks and useful defaults. If you would like customized navigation habits you’ll be able to drop all the way down to decrease layers and create your personal elements and customizations.
• Choose your constructing blocks: As an alternative of embedding all habits inside the library, Nav3 gives smaller elements that you may mix to create extra advanced performance. We have additionally offered a “recipes ebook” that reveals tips on how to mix elements to resolve frequent navigation challenges.

Key options

• Adaptive layouts: A versatile format API (named Scenes) permits you to render a number of locations in the identical format (for instance, a list-detail format on massive display gadgets). This makes it straightforward to change between single and multi-pane layouts.
• Modularity: The API design permits navigation code to be break up throughout a number of modules. This improves construct occasions and permits clear separation of duties between function modules.


Determine 3. Customized animations and predictive again are straightforward to implement, and straightforward to override for particular person locations.

Primary code instance

To present you an thought of how Nav3 works, here is a brief code pattern.

// Outline the routes in your app and any arguments.
knowledge object House
knowledge class Product(val id: String)

// Create a again stack, specifying the route the app ought to begin with.
val backStack = bear in mind { mutableStateListOf<Any>(House) }

// A NavDisplay shows your again stack. At any time when the again stack modifications, the show updates.
NavDisplay(
    backStack = backStack,

    // Specify what ought to occur when the consumer goes again
    onBack = { backStack.removeLastOrNull() },

    // An entry supplier converts a route right into a NavEntry which accommodates the content material for that route.
    entryProvider = { route ->
        when (route) {
            is House -> NavEntry(route) {
                Column {
                    Textual content("Welcome to Nav3")
                    Button(onClick = {
                        // To navigate to a brand new route, simply add that path to the again stack
                        backStack.add(Product("123"))
                    }) {
                        Textual content("Click on to navigate")
                    }
                }
            }
            is Product -> NavEntry(route) {
                Textual content("Product ${route.id} ")
            }
            else -> NavEntry(Unit) { Textual content("Unknown route: $route") }
        }
    }
)

Get began and supply suggestions

To get began, try the developer documentation, plus the recipes repository which offers examples for:

• frequent navigation UI, similar to a navigation rail or bar
• conditional navigation, similar to a login move
• customized layouts utilizing Scenes

We plan to offer code recipes, documentation and blogs for extra advanced use circumstances in future.

Nav3 is at present in alpha, which signifies that the API is liable to alter based mostly on suggestions. In case you have any points, or want to present suggestions, please file a problem.

Nav3 gives a versatile and highly effective basis for constructing fashionable navigation in your Compose functions. We’re actually excited to see what you construct with it.

Discover this announcement and all Google I/O 2025 updates on io.google beginning Might 22.