▶ Watch (0:42)

Navigation 3 builds on Compose state as its foundation. The back stack is a list developers own entirely. Keys on the stack can be any type. Each key maps to a nav entry holding composable content. Adding or removing keys triggers recomposition. To set up, define a nav key, create a back stack with it, and pass both to NavDisplay. The EntryProvider DSL maps each key to its content. NavDisplay calls the provider with the key to get the entry.

Scene Strategies Determine Multi-Entry Layouts

▶ Watch (2:17)

A Scene decides which entries display and how they arrange. NavDisplay asks each SceneStrategy in order. The first strategy that returns a Scene wins — dialog, side-by-side list-detail, horizontal pager, bottom sheet, or single pane. Strategies evaluate entry metadata, a map of string to any. Entries opt into specific strategies by adding matching metadata. This setup lets the same nav display show different layouts depending on the active strategy.

Version 1.1 Adds Type-Safe Metadata and Strategy Lists

▶ Watch (3:36)

Version 1.1 renames the singular scene strategy parameter to scene strategies and accepts a list. Order still matters: the first strategy that returns a scene dictates the layout. The metadata API gains a NavMetadataKey interface with a type parameter for the associated data value. A type-safe metadata DSL provides a put function that accepts keys extending NavMetadataKey and their typed values. The DSL returns a string-to-any map. The plus operator combines metadata maps.

Shared Nav Entries Animate Smoothly Between Screens

▶ Watch (5:47)

NavDisplay can render multiple entries simultaneously. When the same entry appears on two consecutive screens — entry B in a two-pane layout that shifts from right to left — the entry previously dropped immediately, causing a flash. Version 1.1 animates shared entries as shared elements within a SharedTransitionLayout. The entry exits the old screen and enters the new screen in one continuous transition. Wrap NavDisplay inside SharedTransitionLayout and pass the SharedTransitionScope to enable this.

Scene Decorators Wrap Entire Layouts

▶ Watch (7:53)

Scene decorators modify the scene returned by strategies. They add UI elements like top app bars, navigation bars, or rails at the scene level. A decorator strategy implements decorateScene — it returns the input scene unchanged if no decoration applies. The border example wraps the scene content inside a Box with border modifiers. When the window is narrow, the two-pane strategy returns null and a single-pane scene is decorated with blue then red borders. When wide, the two-pane scene receives the same decoration chain.

▶ Watch (12:50)

Navigation 3 extends to Wear OS. Wear Compose Navigation 1.6 stable ships a swipe dismissible scene strategy. Add rememberSwipeDismissibleSceneStrategy to NavDisplay. Entries render in Wear material components with full swipe gesture support. Version 1.2 will add deep link APIs and state-based result passing between destinations. Recipes for both features exist in the Nav 3 recipes GitHub repo but the team is graduating them to first-class APIs.

Notable Quotes

Navigation 3 was built from the ground up with compose state as a fundamental building block. Clara Fok · ▶ Watch (0:44)

A scene controls which entries are displayed and how they are displayed. Clara Fok · ▶ Watch (2:20)

In 1.1, we improved shared nav entries by animating them as shared elements. Clara Fok · ▶ Watch (6:54)

Support for Navigation 3 goes beyond mobile devices. Clara Fok · ▶ Watch (12:50)

Key Takeaways

  • Navigation 3 uses Compose state directly. The back stack is a list you fully own.
  • Scene decorators in 1.1 add navigation UI at the scene level without per-entry repetition.
  • Wear Compose Navigation 1.6 brings swipe dismissible scene navigation to Wear OS.