Navigation 3
Android (Google)OfficialCreated by Google LLCDistributed by Android (Google)
- Skill
- Tool integration
- Software development
- Apache-2.0
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides developers with the necessary documentation, migration steps, and code recipes to adopt Jetpack Navigation 3. It covers the core concepts of the library, including back stack management, adaptive layouts using Scenes, deep link handling, and integration with Hilt, ViewModel, and Material 3 Adaptive components. The resource is designed to help developers transition from Navigation 2 or implement new navigation flows with a focus on type-safe, Compose-first architecture.
What it does
- Provides a step-by-step migration path from Navigation 2 to Navigation 3.
- Explains how to define destinations, manage back stacks, and use NavDisplay.
- Offers code recipes for common patterns like bottom sheets, dialogs, and adaptive layouts.
- Demonstrates how to handle deep links, animations, and conditional navigation.
- Shows integration with dependency injection frameworks like Hilt and Koin.
- Details how to pass arguments to ViewModels and return results between screens.
When to use it
- When you need to migrate an existing Android app from Navigation 2 to Navigation 3.
- When building a new Android application using Jetpack Compose.
- When implementing complex navigation patterns like multiple back stacks or adaptive list-detail views.
- When you need to handle deep links or conditional navigation flows in a type-safe manner.
Advantages
- Full control over the back stack and navigation state.
- Native support for adaptive layouts and multi-pane displays.
- Strongly typed navigation routes.
- Simplified integration with Jetpack Compose and ViewModel.
- Extensive library of code recipes for common UI and architectural patterns.
Usage examples
- “How do I migrate my existing Android app from Navigation 2 to Navigation 3?”
- The agent will guide you through the migration steps, including updating dependencies, replacing NavController with the new state management classes, and switching from NavHost to NavDisplay.
- “Show me how to implement a list-detail layout using Navigation 3.”
- The agent will provide the relevant code recipe for implementing adaptive list-detail scenes using the Navigation 3 Scenes API.
- “How can I handle conditional navigation for an authentication flow?”
- The agent will explain how to switch navigation flows based on conditions, such as checking user login status, using the conditional navigation recipe.
- “How do I pass arguments to a ViewModel in Navigation 3?”
- The agent will demonstrate how to pass navigation arguments to a ViewModel constructed using the viewModel() function.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/android/navigation-3/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip navigation-3.zip -d .agents/skills
Documentation by Google LLC
Migration guide
Navigation 2 to Navigation 3 migration guide: Step-by-step guide to migrate an Android application from Navigation 2 to Navigation 3, covering dependency updates, route changes, state management, and UI component replacements.
Requirements
Guide: Migrate to type-safe navigation in Compose : Step-by-step guide to migrating an Android application from string-based navigation to Type-Safe Navigation in Jetpack Compose using Jetpack Navigation 2.
Developer documentation
Navigation 3. Search documentation for more information on basics, saving and managing navigation state, modularizing navigation code, creating custom layouts using Scenes, animating between destinations, or applying logic or wrappers to destinations.
Recipes
Code examples showcasing common patterns.
Basic API usage
Basic: Shows most basic API usage.
Saveable back stack: Shows basic API usage with a persistent back stack.
Entry provider DSL: Shows basic API usage using the entryProvider DSL.
Common UI
Common UI: Demonstrates how to implement a common navigation UI pattern with a bottom navigation bar and multiple back stacks, where each tab in the navigation bar has its own navigation history.
Deep links
Static URI: Shows how to handle simple static URI deep links.
URI with Arguments: Shows how to parse path and query arguments from a deep link.
Synthetic BackStack: Shows how to handle deep links with a synthetic back stack.
Custom Matcher: Shows how to implement custom deep link matching logic.
Scenes
Use built-in Scenes
Dialog: Shows how to create a Dialog.
Create custom Scenes
BottomSheet: Shows how to create a BottomSheet destination.
List-Detail Scene: Demonstrates how to implement adaptive list-detail layouts using the Navigation 3 Scenes API.
Two pane Scene: Demonstrates how to implement adaptive two-pane layouts using the Navigation 3 Scenes API.
Material Adaptive
Material List-Detail: Demonstrates how to implement an adaptive list-detail layout using Material 3 Adaptive.
Material Supporting Pane: Demonstrates how to implement an adaptive supporting pane layout using Material 3 Adaptive.
Animations
Animations: Shows how to override the default animations for all destinations and a single destination.
Conditional Transitions: Shows how to implement conditional transition animations.
Common back stack behavior
Multiple back stacks: Shows how to create multiple top level routes, each with its own back stack. Top level routes are displayed in a navigation bar allowing users to switch between them. State is retained for each top level route, and the navigation state persists config changes and process death.
Conditional navigation
Conditional navigation: Switch to a different navigation flow when a condition is met. For example, for authentication or first-time user onboarding.
Lifecycle
Lifecycle Owner: Shows how to use and observe Lifecycle in Navigation 3.
Architecture
Modularized navigation code (Hilt): Demonstrates how to decouple navigation code into separate modules using Hilt or Dagger for DI.
Modularized navigation code (Koin): Demonstrates how to decouple navigation code into separate modules using Koin for DI.
Working with ViewModel
Passing navigation arguments
Basic ViewModel : Navigation arguments are passed to a
ViewModelconstructed usingviewModel()
Returning results
Returning Results as Events : Returning results as events to content in another
NavEntryReturning Results as State : Returning results as state stored in a
CompositionLocal
Files
- ATTRIBUTION.mdAdded by AutoGineer955 B
- LICENSELicence file added by AutoGineer11.1 KiB
- SKILL.md6.5 KiB
- references/android/guide/navigation/navigation-3/index.md3.5 KiB
- references/android/guide/navigation/navigation-3/migration-guide.md26.5 KiB
- references/android/guide/navigation/navigation-3/recipes/animations.md6.4 KiB
- references/android/guide/navigation/navigation-3/recipes/basic.md3.5 KiB
- references/android/guide/navigation/navigation-3/recipes/basicdsl.md3.5 KiB
- references/android/guide/navigation/navigation-3/recipes/basicsaveable.md3.5 KiB
- references/android/guide/navigation/navigation-3/recipes/bottomsheet.md7.8 KiB
- references/android/guide/navigation/navigation-3/recipes/common-ui.md8.5 KiB
- references/android/guide/navigation/navigation-3/recipes/conditional-transitions.md8.4 KiB
- references/android/guide/navigation/navigation-3/recipes/conditional.md9.4 KiB
- references/android/guide/navigation/navigation-3/recipes/deeplinks-custommatcher.md7.1 KiB
- references/android/guide/navigation/navigation-3/recipes/deeplinks-staticuri.md5.5 KiB
- references/android/guide/navigation/navigation-3/recipes/deeplinks-syntheticbackstack.md7.7 KiB
- references/android/guide/navigation/navigation-3/recipes/deeplinks-uriarguments.md15.4 KiB
- references/android/guide/navigation/navigation-3/recipes/dialog.md4.4 KiB
- references/android/guide/navigation/navigation-3/recipes/lifecycle-owner.md8.2 KiB
- references/android/guide/navigation/navigation-3/recipes/material-listdetail.md6.4 KiB
- references/android/guide/navigation/navigation-3/recipes/material-supportingpane.md6.6 KiB
- references/android/guide/navigation/navigation-3/recipes/modular-hilt.md12.4 KiB
- references/android/guide/navigation/navigation-3/recipes/modular-koin.md13.3 KiB
- references/android/guide/navigation/navigation-3/recipes/multiple-backstacks.md16.6 KiB
- references/android/guide/navigation/navigation-3/recipes/passingarguments.md16.0 KiB
- references/android/guide/navigation/navigation-3/recipes/results-event.md9.8 KiB
- references/android/guide/navigation/navigation-3/recipes/results-state.md9.6 KiB
- references/android/guide/navigation/navigation-3/recipes/scenes-listdetail.md15.9 KiB
- references/android/guide/navigation/navigation-3/recipes/scenes-twopane.md9.1 KiB
- references/android/guide/navigation/type-safe-destinations.md4.1 KiB
references/android/guide/navigation/navigation-3/recipes/modular-koin.md
Modular Navigation Recipe (Koin)
This recipe demonstrates how to structure a multi-module application using Navigation 3 and Koin for dependency injection. The goal is to create a decoupled architecture where navigation is defined and implemented in separate feature modules. It relies on the koin-compose-navigation3 artifact.
How it works
The application is divided into several Android modules:
appmodule : This is the main application module. It providesKoinDeepLinkActivity(an entry point demonstrating regular and deep link intent launches),KoinModularActivity(which hosts theNavDisplayand delegates deep link intents toNavigator.handleDeepLink(intent)), and initializes a commonNavigator(resolving all registeredBackStackMatcher<*, NavKey>s viagetAll()).commonmodule: This module contains the core navigation logic used by both the application module and the feature modules, including:A
Navigatorclass that manages the back stack, resolves incoming deep link intents, and builds synthetic back stacks viahandleDeepLink(intent).A
startDestination: NavKeyused to initialize the back stack.BackStackMatcher<*, NavKey>, which feature modules use to contribute their deep link matchers with synthetic back stacks.
Feature modules (e.g.,
conversation,profile): Each feature is split into two sub-modules:apimodule: Defines the public API for the feature, including its navigation routes and deep link URI patterns. This allows other modules to navigate to this feature without needing to know about its implementation details.implmodule : Provides the implementation of the feature, including its composables and KoinModule. The Koin module uses thenavigationDSL to define the entry provider installers andsingle<BackStackMatcher<*, NavKey>>(named<...>())configured with.withBackStackto establish the appropriate hierarchical back stack (e.g.,[ConversationList, ConversationDetail(id)]).
This modular approach allows for a clean separation of concerns, making the codebase more scalable and maintainable. Each feature is responsible for its own navigation logic, and the app module only combines these pieces together.
Image: untitled Explore View the full recipe on GitHub.
package com.example.nav3recipes.modular.koin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.deeplink.BackStackMatcher
import androidx.navigation3.runtime.deeplink.DeepLinkUri
import androidx.navigation3.runtime.deeplink.UriDeepLinkMatcher
import androidx.navigation3.runtime.deeplink.withBackStack
import kotlinx.serialization.Serializable
import org.koin.androidx.scope.dsl.activityRetainedScope
import org.koin.core.annotation.KoinExperimentalAPI
import org.koin.core.qualifier.named
import org.koin.dsl.module
import org.koin.dsl.navigation3.navigation
// API
@Serializable
object Profile : NavKey
const val PROFILE_URI = "https://www.nav3recipes.com/profile"
// IMPL
@OptIn(KoinExperimentalAPI::class)
val profileModule = module {
activityRetainedScope {
navigation<Profile> { ProfileScreen() }
}
single<BackStackMatcher<*, NavKey>>(named<Profile>()) {
UriDeepLinkMatcher(
uriPattern = DeepLinkUri(PROFILE_URI),
serializer = Profile.serializer(),
).withBackStack { matchResult ->
listOf(ConversationList, matchResult.key)
}
}
}
@Composable
private fun ProfileScreen() {
val profileColor = MaterialTheme.colorScheme.surfaceVariant
Column(
modifier = Modifier
.fillMaxSize()
.background(profileColor)
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "Profile Screen",
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurface
)
}
}package com.example.nav3recipes.modular.koin
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.Button
import androidx.compose.material3.ListItem
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.dropUnlessResumed
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.deeplink.BackStackMatcher
import androidx.navigation3.runtime.deeplink.DeepLinkUri
import androidx.navigation3.runtime.deeplink.UriDeepLinkMatcher
import androidx.navigation3.runtime.deeplink.withBackStack
import com.example.nav3recipes.ui.theme.colors
import kotlinx.serialization.Serializable
import org.koin.androidx.scope.dsl.activityRetainedScope
import org.koin.core.annotation.KoinExperimentalAPI
import org.koin.core.qualifier.named
import org.koin.dsl.module
import org.koin.dsl.navigation3.navigation
// API
object ConversationList : NavKey
@Serializable
data class ConversationDetail(val id: Int) : NavKey {
val color: Color
get() = colors[id % colors.size]
}
const val CONVERSATION_URI = "https://www.nav3recipes.com/conversation"
// IMPL
@OptIn(KoinExperimentalAPI::class)
val conversationModule = module {
activityRetainedScope {
navigation<ConversationList> {
ConversationListScreen(
onConversationClicked = { conversationDetail ->
get<Navigator>().goTo(conversationDetail)
}
)
}
navigation<ConversationDetail> { key ->
ConversationDetailScreen(key) {
get<Navigator>().goTo(Profile)
}
}
}
single<BackStackMatcher<*, NavKey>>(named<ConversationDetail>()) {
UriDeepLinkMatcher(
uriPattern = DeepLinkUri("$CONVERSATION_URI/{id}"),
serializer = ConversationDetail.serializer(),
).withBackStack { matchResult ->
listOf(ConversationList, matchResult.key)
}
}
}
@Composable
private fun ConversationListScreen(
onConversationClicked: (ConversationDetail) -> Unit
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
) {
items(10) { index ->
val conversationId = index + 1
val conversationDetail = ConversationDetail(conversationId)
val backgroundColor = conversationDetail.color
ListItem(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = dropUnlessResumed {
onConversationClicked(conversationDetail)
}),
headlineContent = {
Text(
text = "Conversation $conversationId",
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.onSurface
)
},
colors = ListItemDefaults.colors(
containerColor = backgroundColor // Set container color directly
)
)
}
}
}
@Composable
private fun ConversationDetailScreen(
conversationDetail: ConversationDetail,
onProfileClicked: () -> Unit
) {
Column(
modifier = Modifier
.fillMaxSize()
.background(conversationDetail.color)
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "Conversation Detail Screen: ${conversationDetail.id}",
style = MaterialTheme.typography.headlineMedium,
color = MaterialTheme.colorScheme.onSurface
)
Spacer(modifier = Modifier.height(16.dp))
Button(onClick = dropUnlessResumed(block = onProfileClicked)) {
Text("View Profile")
}
}
}package com.example.nav3recipes.modular.koin
import android.content.Intent
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.snapshots.SnapshotStateList
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.deeplink.BackStackMatcher
import androidx.navigation3.runtime.deeplink.DeepLinkRequest
import androidx.navigation3.runtime.deeplink.invoke
class Navigator(
startDestination: NavKey,
private val deepLinkMatchers: List<BackStackMatcher<*, NavKey>>,
) {
val backStack: SnapshotStateList<NavKey> = mutableStateListOf(startDestination)
fun goTo(destination: NavKey) {
backStack.add(destination)
}
fun handleDeepLink(intent: Intent) {
if (intent.data == null && intent.extras == null) return
val request = DeepLinkRequest(intent)
val matchResult = deepLinkMatchers.firstNotNullOfOrNull { matcher ->
matcher.match(request)
} ?: return
backStack.clear()
backStack.addAll(matchResult.backStack)
}
fun goBack() {
backStack.removeLastOrNull()
}
}package com.example.nav3recipes.modular.koin
import org.koin.androidx.scope.dsl.activityRetainedScope
import org.koin.dsl.module
val appModule = module {
includes(profileModule, conversationModule)
activityRetainedScope {
scoped {
Navigator(
startDestination = ConversationList,
deepLinkMatchers = getAll(),
)
}
}
}package com.example.nav3recipes.modular.koin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.ui.Modifier
import androidx.navigation3.ui.NavDisplay
import com.example.nav3recipes.ui.setEdgeToEdgeConfig
import org.koin.android.ext.android.inject
import org.koin.android.scope.AndroidScopeComponent
import org.koin.androidx.compose.navigation3.getEntryProvider
import org.koin.androidx.scope.activityRetainedScope
import org.koin.core.Koin
import org.koin.core.annotation.KoinExperimentalAPI
import org.koin.core.component.KoinComponent
import org.koin.core.scope.Scope
import org.koin.dsl.koinApplication
/**
* This recipe demonstrates how to use a modular approach with Navigation 3,
* where different parts of the application are defined in separate modules and injected
* into the main app using Koin.
*
* Features (Conversation and Profile) are split into two modules:
* - api: defines the public facing routes for this feature
* - impl: defines the entryProviders for this feature, these are injected into the app's main activity
* The common module defines:
* - a common navigator class that exposes a back stack and methods to modify that back stack
* - a type that should be used by feature modules to inject entryProviders into the app's main activity
* The app module creates the navigator by supplying a start destination and provides this navigator
* to the rest of the app module (i.e. MainActivity) and the feature modules.
*/
@OptIn(KoinExperimentalAPI::class)
class KoinModularActivity : ComponentActivity(), AndroidScopeComponent, KoinComponent {
// Local Koin Context Instance
companion object {
private val localKoin = koinApplication {
modules(appModule)
}.koin
}
// Override default Koin context to use the local one
override fun getKoin(): Koin = localKoin
override val scope : Scope by activityRetainedScope()
val navigator: Navigator by inject()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setEdgeToEdgeConfig()
navigator.handleDeepLink(intent)
setContent {
Scaffold { paddingValues ->
NavDisplay(
backStack = navigator.backStack,
modifier = Modifier.padding(paddingValues),
onBack = { navigator.goBack() },
entryProvider = getEntryProvider()
)
}
}
}
}Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Google LLC
- Publisher
- Android (Google) (Official)
- Distributed by
- Android (Google)
- Source
- android/skills · navigation/navigation-3 · commit bf68e2d
- Licence
- Apache License 2.0 (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE.txt)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Google LLC or Android (Google).
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download navigation-3.zip