DEV Community

Sebastien Lato
Sebastien Lato

Posted on

Modern Navigation in SwiftUI

#swift #swiftui #ios #navigation

Navigation in SwiftUI has evolved massively since the early days of NavigationView.

With NavigationStack, NavigationPath, sheet detents, and modern transitions, we finally have a system that’s flexible and robust enough for real apps.

But many developers still struggle with:

  • programmatic navigation
  • multiple stacks (tabs + navigation)
  • sheets vs fullScreenCover
  • deep linking
  • passing data between screens
  • resetting stacks
  • best architecture practices

This guide will give you the cleanest, most scalable navigation patterns for SwiftUI.

🎯 1. Use NavigationStack Everywhere (Not NavigationView) 

NavigationStack { HomeView() }
Enter fullscreen mode Exit fullscreen mode

NavigationStack gives you:

  • programmatic navigation
  • deep-link support
  • custom stacks per tab
  • better back behavior
  • predictable state

📦 2. The Cleanest Way to Push New Screens

For simple apps:

struct HomeView: View { @State private var path = NavigationPath() var body: some View { NavigationStack(path: $path) { VStack { Button("Open Details") { path.append("details") } } .navigationDestination(for: String.self) { value in if value == "details" { DetailsView() } } } } }
Enter fullscreen mode Exit fullscreen mode

Why this works well:

  • path represents your full navigation history
  • type-safe destinations
  • easy to wipe/reset the stack

🧭 3. Deep Links & Programmatic Jumps

You can push multiple screens in one go:

path = ["profile", "settings", "advanced"]
Enter fullscreen mode Exit fullscreen mode

Great for deep links and onboarding.

🗂 4. Navigation Per Tab (The Correct Architecture)

Each tab maintains its own stack.

struct RootView: View { var body: some View { TabView { NavigationStack { HomeView() } .tabItem { Label("Home", systemImage: "house") } NavigationStack { ExploreView() } .tabItem { Label("Explore", systemImage: "sparkles") } NavigationStack { SettingsView() } .tabItem { Label("Settings", systemImage: "gear") } } } }
Enter fullscreen mode Exit fullscreen mode

This avoids all the classic problems:

  • tab switching resets screens (fixed)
  • navigation becomes global (fixed)
  • deep linking breaks tabs (fixed)

Each tab has its OWN history — just like Apple’s apps.

🪟 5. Sheets vs Full Screen Covers (When to Use Each)

Use sheet when:

  • user can dismiss anytime
  • you want a card/detent look
  • modal feels lightweight
  • controls/settings/pickers 
.sheet(isPresented: $showSheet) { SettingsSheet() }
Enter fullscreen mode Exit fullscreen mode

Use fullScreenCover when:

  • experience is immersive
  • onboarding flows
  • media players
  • authentication 
.fullScreenCover(isPresented: $showFull) { OnboardingFlow() }
Enter fullscreen mode Exit fullscreen mode

This distinction matches Apple’s Human Interface Guidelines.

🧱 6. Sheet Detents 

.sheet(isPresented: $show) { MySheet() .presentationDetents([.medium, .large]) .presentationCornerRadius(22) }
Enter fullscreen mode Exit fullscreen mode

Useful for:

  • filters
  • details panels
  • quick actions
  • maps
  • music player mini-panels

🔗 7. Passing Data the RIGHT Way

Push with data:

path.append(UserDetailRoute(user))
Enter fullscreen mode Exit fullscreen mode

Destination:

.navigationDestination(for: UserDetailRoute.self) { route in UserDetailView(user: route.user) }
Enter fullscreen mode Exit fullscreen mode

Much cleaner than environment objects everywhere.

📌 8. Resetting the Stack (Pop to Root) 

withAnimation { path = NavigationPath() }
Enter fullscreen mode Exit fullscreen mode

Perfect for:

  • logging out
  • finishing onboarding
  • resetting flows

🧠 9. Recommended Folder Structure for Navigation 

Features/ │ ├── Home/ ├── Explore/ ├── Settings/ │ Navigation/ ├── Router.swift ├── Routes.swift └── NavigationModel.swift
Enter fullscreen mode Exit fullscreen mode

Keep routes centralized — not scattered across screens.

🧭 10. You NEED a Router (Scalable Architecture)

Create a central routing layer:

@Observable class Router { var path = NavigationPath() func push(_ route: Route) { path.append(route) } func pop() { path.removeLast() } func popToRoot() { path = NavigationPath() } }
Enter fullscreen mode Exit fullscreen mode

Inject it into screens that need navigation.

This scales apps from 5 screens to 50.

🚀 Final Thoughts

SwiftUI navigation is finally powerful, stable, and scalable — if you use it correctly.

Now you can:

  • push & pop cleanly
  • deep link properly
  • maintain separate stacks per tab
  • use sheets & full screens the right way
  • build with a routing architecture
  • manage complex flows

Top comments (0)