Navigation & Adaptive UI

Define type-safe Nav 3 routes and adaptive list-detail layouts for multi-pane devices.

67|7|Updated Jan 22, 2022

Search Tags:#navigation #type-safe #compose #adaptive-layout #nav-3 #back-navigation

Ready to run

npx skills add https://github.com/akitikkx/upnext --skill navigation-adaptive-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Navigation & Adaptive UI
Source: https://github.com/akitikkx/upnext/tree/main/.agent/skills/navigation_adaptive_ui
Command: npx skills add https://github.com/akitikkx/upnext --skill navigation-adaptive-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide provides best practices for implementing type-safe navigation (Nav 3) and adaptive layouts in Upnext, ensuring consistent, scalable UI flows across devices.

Core Features & Use Cases

Type-safe routes defined via Destinations.kt and Kotlin Serialization to enable compile-time route validation.
Adaptive layouts using a NavigableListDetailPaneScaffold to support phones, tablets, and foldables.
Clear guidance to avoid pitfalls like navigator mismatches and back navigation conflicts for a smooth user experience.

Quick Start

Apply the Nav 3 patterns to implement an adaptive list-detail flow that responds to device size.

Frequently Asked Questions about Navigation & Adaptive UI

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement type-safe navigation in Kotlin Compose?▼

You implement type-safe navigation by defining routes via Kotlin Serialization in a Destinations file, then using a NavController to navigate and extract route arguments, ensuring compile-time route validation.

How do I build an adaptive UI layout for phones, tablets, and foldables?▼

You build an adaptive UI layout by applying the NavigableListDetailPaneScaffold pattern, which automatically adjusts multi-pane list-detail experiences to respond correctly across phones, tablets, and foldable devices.

How do I prevent back navigation conflicts in a multi-pane Compose scaffold?▼

You prevent back navigation conflicts by enforcing scaffold-backed back navigation behavior, ensuring dependencies on Destinations definitions are strictly applied to avoid navigator mismatches within the adaptive layout.

What is Nav 3 and when do I need it for adaptive layouts?▼

Nav 3 is a navigation approach used to model routes with Kotlin Serialization and manage multi-pane adaptive layouts, needed when you require consistent, scalable UI flows across different device sizes.

Why does my NavController throw a navigator mismatch error?▼

A navigator mismatch error typically occurs when dependencies on Destinations definitions are not properly enforced, causing conflicts between the NavController and the NavigableListDetailPaneScaffold during route extraction.