Navigation

Posts tagged with Navigation

Type-Safe Navigation Compose with Kotlin Serialization

Replace string-based Navigation Compose routes with serializable Kotlin types, typed arguments, and a graph that is easier to refactor and test.

Two stylized destination screens connected by a path carrying colored data tokens from one screen to another.

Passing Arguments Between Compose Destinations

Pass IDs, filters, and optional values between Jetpack Compose destinations with type-safe Kotlin serialization routes and reliable back-stack handling.

A stylized Compose screen with a teal vertical navigation rail and a violet bottom action bar surrounding a central content panel.

BottomAppBar and NavigationRail in Material 3

Choose BottomAppBar or NavigationRail in Material 3 Compose, keep screen actions separate from destination navigation, handle Scaffold padding, and plan adaptive navigation.

A teal link path enters a violet navigation gateway and reaches a warm off-white destination card, with a small coral route marker.

Deep Links with Navigation Compose

Add URI deep links to Navigation Compose destinations, configure Android App Links, handle launch modes safely, and test direct navigation to typed destinations.

A violet navigation graph container holds a smaller teal subgraph leading through connected cards to a warm off-white destination.

Nested Navigation Graphs in Jetpack Compose

Organize onboarding, authentication, and wizard subflows with nested Navigation Compose graphs, typed graph routes, and clear back-stack boundaries.

Three violet and teal navigation paths branch from a bottom bar and retain their own stacks of rounded destination cards.

Bottom Navigation with Multiple Back Stacks in Jetpack Compose

Preserve each bottom-navigation tab's place with Navigation Compose by saving and restoring back stacks when users switch top-level destinations.

A teal bottom navigation bar transforms into a violet side rail around a central warm off-white content panel.

Adaptive NavigationSuiteScaffold for Phone and Tablet

Use NavigationSuiteScaffold in Jetpack Compose to present the same top-level destinations as a bottom bar on compact windows and a navigation rail on wider windows.

A dark navigation diagram showing a central mobile app screen connected to several destination panels with forward and back paths.

Navigation Compose: Create Your First NavHost

Create a first Navigation Compose NavHost with type-safe routes, arguments, back navigation, and callbacks that keep screens independent.