# Navigation3

Implement navigation in Jetpack Compose using Navigation 3.

- Repository: https://github.com/new-silvermoon/awesome-android-agent-skills (998 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-07-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add new-silvermoon/awesome-android-agent-skills --skill navigation3 -g -a claude-code -y`
Codex: `npx skills add new-silvermoon/awesome-android-agent-skills --skill navigation3 -g -a codex -y`
Cursor: `npx skills add new-silvermoon/awesome-android-agent-skills --skill navigation3 -g -a cursor -y`
Gemini CLI: `npx skills add new-silvermoon/awesome-android-agent-skills --skill navigation3 -g -a gemini-cli -y`

## Description

Implement navigation in Jetpack Compose using Navigation 3. Use when asked to build state-driven navigation, manage back stacks, scope ViewModels, implement adaptive layouts, or migrate from Navigation Compose.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Navigation 3

## Overview

Implement state-driven navigation in Jetpack Compose using Navigation 3. Unlike Navigation Compose, Navigation 3 models navigation as application state rather than through a `NavController`. This skill covers navigation keys, back stack management, ViewModel scoping, entry decorators, adaptive layouts, deep links, animations, state restoration, and testing.

## Setup

Add the Navigation 3 dependencies:

```kotlin
// build.gradle.kts
dependencies {

    implementation("androidx.navigation3:navigation3-runtime:1.0.0-alpha08")
    implementation("androidx.navigation3:navigation3-ui:1.0.0-alpha08")

    // Lifecycle integration
    implementation("androidx.lifecycle:lifecycle-viewmodel-navigation3:2.9.2")

    // Serialization
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.8.1")
}

// Enable serialization plugin
plugins {
    kotlin("plugin.serialization") version "2.2.0"
}
```

---

## Core Concepts

### 1. Define Navigation Keys

Navigation destinations are represented by immutable serializable objects.

```kotlin
import kotlinx.serialization.Serializable

@Serializable
data object Home

@Serializable
data class Profile(
    val userId: String
)

@Serializable
data class Product(
    val productId: String,
    val showReviews: Boolean = false
)

@Serializable
data object Settings
```

Keys become your navigation state.

---

### 2. Create the Back Stack

Navigation 3 replaces `NavController` with a mutable state back stack.

```kotlin
@Composable
fun MyApp() {

    val backStack = remember {
        mutableStateListOf<Any>(Home)
    }

    AppNavDisplay(backStack)
}
```

---

### 3. Create NavDisplay

```kotlin
@Composable
fun AppNavDisplay(
    backStack: SnapshotStateList<Any>
) {

    NavDisplay(
        backStack = backStack,
        onBack = {
            if (backStack.size > 1) {
                backStack.removeLast()
            }
        }
    ) { key ->

        when (key) {

The rest: https://github.com/new-silvermoon/awesome-android-agent-skills/blob/HEAD/.github/skills/ui/compose-navigation/SKILL.md